开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js中on的用法

在JavaScript中，“on”通常用于事件处理，表示“当……时触发”。它是事件监听的一种简写方式，常用于HTML元素的事件绑定。以下是关于“on”的一些基础概念、优势、类型、应用场景以及常见问题的解答：

基础概念

“on”后跟事件名称，如onclick、onmouseover等，用于指定当特定事件发生时执行的JavaScript代码。

优势

简洁性：使用“on”属性可以快速地将事件处理程序绑定到元素上。
直接性：在HTML标签中直接使用“on”属性，使得代码易于理解和维护（尽管在大型项目中，推荐使用更现代的事件绑定方法，如addEventListener）。

类型

常见的“on”事件类型包括：

onclick：点击事件
onmouseover：鼠标悬停事件
onmouseout：鼠标移出事件
onkeydown、onkeyup：键盘按键事件
onload：页面加载完成事件

应用场景

交互式按钮：使用onclick事件响应用户点击。
导航菜单：使用onmouseover和onmouseout实现悬停效果。
表单验证：在onsubmit事件中检查用户输入的有效性。

常见问题及解决方法

问题1：事件处理程序未触发

原因：可能是事件名称拼写错误，或者JavaScript代码中有语法错误。
解决方法：检查事件名称是否正确，使用浏览器的开发者工具查看控制台是否有错误信息。

问题2：多个事件处理程序冲突

原因：同一个元素上绑定了多个相同的事件处理程序，导致它们之间相互干扰。
解决方法：确保每个事件处理程序都有唯一的逻辑，或者使用removeEventListener来移除不需要的事件处理程序。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何使用“on”属性绑定点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>On Event Example</title>
    <script>
        function handleClick() {
            alert('Button clicked!');
        }
    </script>
</head>
<body>
    <button onclick="handleClick()">Click Me</button>
</body>
</html>

在这个示例中，当用户点击按钮时，会弹出一个警告框显示“Button clicked!”。

注意事项

虽然“on”属性在简单的项目中很有用，但在更复杂的应用中，推荐使用addEventListener方法来绑定事件处理程序。这种方法提供了更多的灵活性和控制，例如可以绑定多个相同类型的事件处理程序，而不会相互覆盖。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js中reduce的用法

}, init); arr 表示原数组； prev 表示上一次调用回调时的返回值，或者提供的初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供...0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。...： ① 初始化一个空数组 ② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中 ③ 将需要去重处理的数组中的第2项在初始化数组中查找，...如果找不到，就将该项继续添加到初始化数组中 ④ …… ⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中 ⑥ 将这个初始化数组返回 4....其它reduceRight()方法该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。 5.

5.7K4 0

js中typeof的用法

js中检测变量是否定义,可以用这个语句,比如: typeof a!...2. typeof的返回值 typeof运算符的返回类型为字符串，值包括如下几种： 1....'undefined' --未定义的变量或值 2. 'boolean' --布尔类型的变量或值 3....'object' --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理) 6....，但是对于一些创建的对象，它们都会返回'object'，有时我们需要判断该实例是否为某个对象的实例，那么这个时候需要用到instanceof运算符

4.8K4 0

js中settimeout()的用法详解_js中setattribute

大家好，又见面了，我是你们的朋友全栈君。 setTimeout与setTimeInterval均为window的函数，使用中顶层window一般都会省去，这两个函数经常稍不留神就使用错了。...setTimeout内的函数先不执行，隔一段时间后再执行，函数后面的数字是隔的时间，单位是毫秒（千分之一秒）比如: setTimeout(‘alert(“hello world!”)’..., 400); setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，直到clearInterval()被调用或窗口被关闭。比如： Stop interval setInterval动作的作用是在播放动画的时...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

15K2 0

js中find的用法_js中find函数

今天我们要说的是结合ES6新特性谈一下js里面的一个很好用的方法-find() 现在的前端和过去的不一样，过去的前端只要会画页面就行了，但是现在仅仅会画页面已经远远不够了，现在前端还需要会处理数据，而且还要会将数据分析分类处理...，这样后端的压力比较大，我们举个例子： /** * aim csdn博客 - find()用法 * author clearlove * date 18-08-06 * */ var...下面我们讲怎么用前端处理这块的逻辑首先我们拿到了所有的数据这里我直接放到一个测试用的js里面存放，要实现之前说的效果，就需要使用我们今天的主角find()方法。 find()是用来做什么的呢？...find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 在本文章需要注意的几个点： ①、第一个元素 ②、测试函数那么如何使用呢？...-- aim csdn博客 - find()用法 author clearlove date 18-08-06 --> <!

11.7K3 0

JS中== 、===的用法和区别

简要介绍JS中== 、===的用法和区别 == 仅当左右操作数相等时返回true，如果两个操作数不是同一类型时，js会隐式转换为合适的类型，然后对值进行比较 === 当且仅当左右操作数类型相等，且值相等时...，才会返回true，当左右两个操作数不是同一类型时，js不会转换其类型 var v=1; var v1='1'; var v2=1; var v3=3; alert("类型不同的"); alert...==v1) --true alert(v=v3) --3 //赋值 alert("类型相同的"); alert(v==v2) --true

4.2K3 0

js中“||”和“&&”的高级用法

没想到会有人收藏，而且这些不是我自己悟出来的，是网络上找到的一篇文章我读懂后转过来的，原文是http://www.jb51.net/article/21339.htm 例1：用于赋值 &&：从左往右依次判断...，当当前值为true则继续，为false则返回此值（是返回未转换为布尔值时的原值哦） || ：从左往右依次判断，当当前值为false则继续，为true则返回此值（是返回未转换为布尔值时的原值哦） //...attr = 100 || 12; // => e var attr = "e" || "hahaha" // => hahaha var attr = "" || "hahaha" 例2 经过多次判断的赋值...x 0 */ console.log((x>=15 && 4) || (x>=12 && 3) || (x>=10 && 2) || (x>=5 && 1) || 0); 例3 与对象形式的变量合体

3.8K2 0

JS中promise的基础用法

比如在以前，我们在进行多个ajax请求时，第二个请求需要用到第一个请求返回的数据时，我们通常是这样的： $.ajax({ url: 'xxx.php',...，后者是失败的时候调用。...我们主要说调用那里的代码，then方法可以把回调函数分离出来，then函数有两个参数，均为函数，前者是请求成功的函数，后者是请求失败的函数。...然后还要讲的一个函数是promise的all函数。all函数主要用于多个请求的数据无关联的时候。...数组中的数据是每个resolve中每个传入的数据。 ? promise不止用于异步请求，很多场景都可以用，需要大家灵活应用。

4K4 0

js中window.location的用法

用window.location处理解析当前页面URL window.location 对象所包含的属性属性描述 hash 从井号（#）开始的URL（锚点） host 主机名和当前URL的端口号 hostname...主机名 href 完整的URL pathname 路径 port 端口号 protocol 协议 search 参数 js 脚本捕获页面 GET 方式请求的参数？...("a");//GET['a'],取得URL参数a 本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：原文出处：Yiiven https://www.yiiven.cn/js-window-location.html

2.4K3 0

js中prototype的用法「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...看例子就懂了例1 可以在外部使用prototype为自定义的类型添加属性和方法 function Aclass() {

1.7K2 0

JS中indexOf的用法「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。 String.IndexOf(Char, [startIndex], [count])：返回指定字符在原字符串中的第一个匹配项的索引。...可指定字符开始检索位置和指定长度的字符，若没有找到该字符，则返回 -1。也可以判断数组中是否包含某个值。...示例1：查找字符串中某一字符从头开始第一次出现的索引 var str = "Hello world!"...，当匹配到一个字符串时，会返回字符串中第一个字符的索引，如上例匹配word时，返回的是6。...示例2：查找字符串中某一字符从指定位置开始第一次出现的索引 var str = "Hello world!

3.1K2 0

JS中call apply bind的用法

谁调用当前的属性或者方法的,它就是谁 /* 2.1.bind方法作用修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数给我们注意点...: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 */ //call apply bind修改this的.../*call:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: call方法除了可以修改this以外, 还可以传递参数, */.../*apply:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: apply方法除了可以修改this以外, 还可以传递参数, 只不过参数必须通过数组的方式传递...立即执行是不返回的. */ let obj={name:"cyg"}; /* function test(a,b) {

2.9K3 0

js中class的继承的基础用法

在es6中class可通过关键词extends来实现继承，es5则是修改原型链来实现继承的。...有一个注意点：就是子类在constructor方法中调用super，super就是父类的构造函数，我们必须先构造父类，才能使用子类。...，注意看子类中fn1这个函数，他使用了父类的sky属性，注意在子类使用父类的属性时，只能使用this来调用，使用super是找不到的，因为class中的属性都是实例属性。...但是如果是函数，使用this或者super都是可以调用的到，比如在constructor方法中调用了父类的rotate方法，这里使用this.rotate()或者super.rotate()都是可以的，...es5中的继承 es5中的继承则是让某个构造函数的原型对象等于另一个类型的实例，这样实现的继承。

4.3K1 0

【说站】js数组中reduce的用法

js数组中reduce的用法 1、reduce()方法对数组中的每个元素执行一个reducer函数，并将其结果总结为单个返回值。...2、它接收两个参数，一个reducer函数提供给数组的每个调用，一个可选的初始值参数。...cur; },0); 求数组项值 var max = arr.reduce(function (prev, cur) { return Math.max(prev,cur); }); 以上就是js...数组中reduce的用法，希望对大家有所帮助。

2.5K4 0

js中call与apply用法

前天去面试，有个gg问了一些js知识，其中有一道call与apply用法的题目，尽管在365天前用过call方法，但当时还是没能答上来，今天深入总结一下 call和apply，它们的作用都是将函数绑定到另外一个对象上去运行...); // 参数数组，argArray 上面两个函数内部的this指针，都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的一、call 的简单用法...调用call方法，第二个参数属于函数对象func2的参数，因此alert(x)为第二个参数func2 二、call 继承用法与改进 js使用call模拟继承测试代码：中的member this.showSelfA = function() { window.alert(this.memberA); // 显示memberA } }...继承改进（prototype）以上模拟继承方法，仔细分析不是最好的。因为每次在函数（类）中定义了成员方法，都会导致实例有副本，因此可以借助prototype原型，进行改进改进举例如下： <!

2.8K1 0

【说站】js中hasOwnProperty的属性用法

js中hasOwnProperty的属性用法 1、js不会保护hasOwnProperty被非法占用，如果一个对象碰巧存在这个属性，就需要使用外部的hasOwnProperty 函数来获取正确的结果...2、当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。...return false; }, bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); // 总是返回 false // 使用其它对象的 ...hasOwnProperty，并将其上下文设置为foo ({}).hasOwnProperty.call(foo, 'bar'); // true 以上就是js中hasOwnProperty的属性用法，...更多js学习指路：js教程收藏 | 0点赞 | 0打赏

3.3K3 0

js中substring和substr的用法比较

推荐使用substring 方法 stringObject.substring(start,stop) stringObject.substr(start,length) 定义和用法提取字符串中两个指定的索引号之间的字符...substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。参数描述参数描述 start 必需。...一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。...如果省略该参数，那么返回的子串会一直到字符串的结尾。参数描述start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。length 可选。...在返回的子字符串中应包括的字符个数。

4.4K12 0

Vue.js中watch的高级用法

在 Vue.js 的学习中，看到这篇文章，转载记录一下用作备忘。...watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。...默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值： mounted: { this.obj...{ console.log('obj.a changed'); }, immediate: true, // deep: true } } 复制代码这样Vue.js...好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

2.1K3 0

【说站】js中Array.from的用法

js中Array.from的用法 1、Array.from可以从类似的数组或可迭代对象中创建一个新的、浅拷贝的数组实例。...2、Array.from接收三个参数：必须选择类似数组的对象、加工函数、this作用域。...value.repeat(3) //必须指定返回值，否则返回 undefined }, obj) console.log(newObj) // ['aaa', 'bbb', 'ccc'] 以上就是js...中Array.from的用法，希望对大家有所帮助。...更多js学习指路：js教程收藏 | 0点赞 | 0打赏

1.9K2 0

js中获取时间new date()的用法原

(); //获取完整的年份(4位,1970-????)...//获取当前日期 12 var mytime=myDate.toLocaleTimeString(); //获取当前时间 13 myDate.toLocaleString( ); //获取日期与时间 JS...例如动态添加页面元素id的时候，不建议使用。...new Date()).valueOf(); 结果：1280977330748 第三种方法： var timestamp=new Date().getTime()；结果：1280977330748 js...中单独调用new Date()，例如document.write(new Date()); 显示的结果是：Mar 31 10:10:43 UTC+0800 2012 这种格式的时间但是用new Date

14.1K3 1

js中push(),pop(),unshift(),shift()的用法小结

1、push()、pop()和unshift()、shift() 　　这两组同为对数组的操作，并且会改变数组的本身的长度及内容。　　...不同的是 push()、pop() 是从数组的尾部进行增减，unshift()、shift() 是从数组的头部进行增减。　...var arr = [1, 2]; 2、push()和unshift() 　　向数组的尾部/头部添加若干元素，并返回数组的新长度；　　arr.push(3,4)； //返回 arr...的新长度 4 　　arr ; // arr = [1,2,3,4]; 　　arr.unshift(0,0.5); // 返回 arr 的新长度 6...　　arr ; // arr = [0,0.5,1,2,3,4]; 3、pop()和shift() 　　从数组的尾部/头部删除1个元素(删且只删除1个)，

3.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭