原生js事件监听有哪些方法,jq又有哪些,jq中这些方法有何区别

原生js事件监听有哪些方法,jq又有哪些,jq中这些方法有何区别,第1张

一、原生JS事件绑定方法

1、通过HTML属性进行事件处理函数的绑定如: 

1

<a href="#" onclick="f()">

2、通过JavaScript对象属性进行绑定:

1

2

var a=documentgetElementById("a");

aonclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的

通过以上这种方式进行事件函数的绑定有个缺点就是只能对一个元素的一个事件绑定一个事件处理程序,如

1

2

3

4

5

6

documentbodyonclick=function(){

alert("first");

};

documentbodyonclick=function(){

alert("second");

};

以上这种方式后面的事件处理程序会将前面的覆盖只会执行alert("second"),前面的将不会被执行。

3、利用所有文档元素的方法进行事件绑定:

a、addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器

b、attachEvent(type,handler)适用于IE8及以下版本的浏览器

另种方法可以为JS对象的一个类型事件注册多个事件处理程序,但两者是有区别的:

(1)addEventListener中的type是不带有on的如点击事件直接用"click",而在attachEvent中的type是需要带有前缀on的;(2)前者可以接收三个参数决定事件发生的阶段是在捕获阶段还是冒泡阶段,为true则发生在捕获阶段,如果为false则发生在冒泡阶段;(3)通过addEventListener注册的事件的执行顺序与事件的注册顺序一致,即先注册的先执行,后注册的后执行。而后者执行的顺序与注册的顺序是无关的,因而在写代码时代码的执行不要依赖事件的注册顺序。(4)addEventListener对于相同的事件只会注册一次,即使多次的写了注册函数也只会成功注册一个,而后者可以将将相同的事件处理函数注册多次,并且会多次被执行。

这两种方法通常会被同时应用用于兼容不同版本的浏览器。如:

1

2

3

4

5

6

7

if(eleaddEventListener())

{

javascript表达式是自右向左执行的,也就是说oneonclick=test(one);这句

首先执行的是test(one);所以页面加载就会执行alert

通常这里的写法这样:

oneonclick=function(){

alert(onevalue);

};

或者

oneonclick = test;

以上就是关于原生js事件监听有哪些方法,jq又有哪些,jq中这些方法有何区别全部的内容,包括:原生js事件监听有哪些方法,jq又有哪些,jq中这些方法有何区别、JS中事件的调用、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/9516225.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存