事件绑定和普通事件

偏执的太偏执、 2022-06-03 06:08 258阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#d1{
    			width: 50px;
    			height: 50px;
    			background: red;
    			margin-bottom: 20px;
    		}
    		#d2{
    			width: 50px;
    			height: 50px;
    			background: green;
    		}
    	</style>
    </head>
    <body>
    	<div id="d1"></div>
    	<div id="d2"></div>
    	<script>
    		d1.οnclick=function(){
    			console.log("1");
    		}
    		d1.οnclick=function(){
    			console.log("2");
    		}
    		//只输出2
    
    		d2.addEventListener("click",function(){
    			console.log("d2_1");
    		},false);
    		d2.addEventListener("click",function(){
    			console.log("d2_2");
    		},false);
    		//输出d2_1、d2_2
    	</script>
    </body>
    </html>

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定(addEventListener)方式添加事件可以添加多个。

addEventListener不兼容低版本IE

普通事件无法取消

addEventListener还支持事件冒泡+事件捕获，removeEventListener取消绑定事件

addEventListener中的false是默认情况，表示事件在冒泡阶段执行。true表示事件在捕获阶段执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 事件绑定,php实现事件绑定

class EventHandle \{ private static $\_map = array(); //类似jquery绑定事件 public function

谁践踏了优雅/ 2022年11月12日 12:54/ 0 赞/ 318 阅读

相关 jquery绑定事件

bind()向匹配元素添加一个或多个事件处理器。 $(selector).bind(event,data,function) live() 向当前或未来的匹配元素添加一个

左手的ㄟ右手/ 2022年06月17日 01:27/ 0 赞/ 334 阅读

相关 select 绑定事件

select 它的事件是注册在自己标签上的，不是onclick，而是onchange，子标签对低版本浏览器无效，而且也不是正规标准的写法。

比眉伴天荒/ 2022年06月16日 06:48/ 0 赞/ 227 阅读

相关 javascript-事件绑定和普通事件

1.什么是事件绑定,什么是普通事件？事件绑定:针对dom绑定的事件. 普通事件:没有针对dom绑定的事件. 2.为什么要使用事件绑定? 普通事件有一个缺点,

╰+攻爆jí腚メ/ 2022年06月12日 11:09/ 0 赞/ 236 阅读

相关 JavaScript事件绑定

JavaScript事件绑定 -------------------- JavaScript也称ECMAScript，是一种动态类型、弱类型、基于原型的直译式脚本语言；

刺骨的言语ヽ痛彻心扉/ 2022年06月06日 02:15/ 0 赞/ 293 阅读

相关事件绑定和普通事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

偏执的太偏执、/ 2022年06月03日 06:08/ 0 赞/ 259 阅读

相关 JQuery_绑定事件

绑定：绑定事件：一.如何给元素同时绑定两个事件？方法一：链式编程 $('button').click(function(){ a

ゞ浴缸里的玫瑰/ 2022年05月20日 23:42/ 0 赞/ 373 阅读

相关 Tkinter：事件绑定

正如我们此前提到的，一个 Tkinter 应用程序大部分时间花费在事件循环中（通过 mainloop() 方法进入）。事件可以有各种来源：包括用户触发的鼠标和键盘操作和窗口管理

朴灿烈づ我的快乐病毒、/ 2022年04月02日 15:44/ 0 赞/ 321 阅读

相关 jQuery普通绑定事件和on委托事件对比

以click事件为例：普通绑定事件：$(‘.btn1’).click(function(){}绑定 on绑定事件：$(document).on(‘click’,’....

系统管理员/ 2021年04月06日 14:08/ 0 赞/ 622 阅读

相关 WEUI 事件绑定

1、简易的输入同步框所需用到的事件为bindinput,详情可以查看开发文档通过bindinput事件来监听输入框的值是否发生改变且获取到改变后的值，之后在js文件...

小灰灰/ 2021年02月15日 17:29/ 0 赞/ 1050 阅读