在JavaScript中,经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?
事件绑定
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数。
在DOM中直接绑定事件
我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看, DOM事件 。
<input type="button" value="click me" onclick="hello()"> <script> function hello(){ alert("hello world!"); } </script>
在JavaScript代码中绑定事件
在JavaScript代码中(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。
<input type="button" value="click me" id="btn"> <script> document.getElementById("btn").onclick = function(){ alert("hello world!"); } </script>
使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。
事件监听
关于事件监听,W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。
起初Netscape制定了JavaScript的一套事件驱动机制(即事件捕获)。随即IE也推出了自己的一套事件驱动机制(即事件冒泡)。最后W3C规范了两种事件机制,分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制(前端人员一直头痛的兼容性问题),IE9以后IE也支持了W3C规范。
W3C规范
语法:element.addEventListener(event, function, useCapture)
event : (必需)事件名,支持所有 DOM事件 。
function:(必需)指定要事件触发时执行的函数。
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。
注:IE8以下不支持。
<input type="button" value="click me" id="btn1"> <script> document.getElementById("btn1").addEventListener("click",hello); function hello(){ alert("hello world!"); } </script>
IE标准
语法:
element.attachEvent(event, function)
event:(必需)事件类型。需加“on“,例如:onclick。
function:(必需)指定要事件触发时执行的函数。
<input type="button" value="click me" id="btn2"> <script> document.getElementById("btn2").attachEvent("onclick",hello); function hello(){ alert("hello world!"); } </script>
事件监听的优点
1、可以绑定多个事件。
<input type="button" value="click me" id="btn3"> <script> var btn3 = document.getElementById("btn3"); btn3.onclick = function(){ alert("hello 1"); //不执行 } btn3.onclick = function(){ alert("hello 2"); //执行 } </script>
常规的事件绑定只执行最后绑定的事件。
<input type="button" value="click me" id="btn4"> <script> var btn4 = document.getElementById("btn4"); btn4.addEventListener("click",hello1); btn4.addEventListener("click",hello2); function hello1(){ alert("hello 1"); } function hello2(){ alert("hello 2"); } </script>
两个事件都执行了。
2、可以解除相应的绑定
<input type="button" value="click me" id="btn5"> <script> var btn5 = document.getElementById("btn5"); btn5.addEventListener("click",hello1);//执行了 btn5.addEventListener("click",hello2);//不执行 btn5.removeEventListener("click",hello2); function hello1(){ alert("hello 1"); } function hello2(){ alert("hello 2"); } </script>
封装事件监听
<input type="button" value="click me" id="btn5"> //绑定监听事件 function addEventHandler(target,type,fn){ if(target.addEventListener){ target.addEventListener(type,fn); }else{ target.attachEvent("on"+type,fn); } } //移除监听事件 function removeEventHandler(target,type,fn){ if(target.removeEventListener){ target.removeEventListener(type,fn); }else{ target.detachEvent("on"+type,fn); } } //测试 var btn5 = document.getElementById("btn5"); addEventHandler(btn5,"click",hello1);//添加事件hello1 addEventHandler(btn5,"click",hello2);//添加事件hello2 removeEventHandler(btn5,"click",hello1);//移除事件hello1
相关推荐
JavaScript事件绑定是网页交互的核心部分,它允许开发者在用户与页面元素交互时执行特定的代码。本文将探讨三种常见的JavaScript事件绑定方法:传统方式、W3C标准方式以及Internet Explorer (IE)方式,并分析它们...
关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果
当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”...
浅谈React双向数据绑定原理 目录 什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据 什么是双向数据绑定 实现双向数据绑定 数据影响视图视图影响数据 数据影响视图 视图影响数据 如果已经学过...
主要介绍了浅谈JavaScript的Polymer框架中的事件绑定,Polymer是由Google开发的针对Web UI的框架,需要的朋友可以参考下
在jQuery中,有多种方式来绑定事件: #### 标准事件绑定 初始的事件绑定方式是使用`bind()`方法: ```javascript $("#btn").bind("click", function() { // 事件处理代码 }); ``` 然而,为了简化代码,jQuery提供...
本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其背后的原理。 1. 普通组件绑定事件 在Vue中,当我们为一个普通的HTML元素(如`<input>`、`<button>`等)绑定事件时,可以直接使用`@event`语法,...
在传统的网页开发中,通常需要JavaScript来监听用户事件,然后手动更新DOM以反映数据变化。然而,AngularJS通过数据绑定机制,自动实现了模型与视图之间的同步。数据绑定分为两种类型:单向绑定和双向绑定。单向绑定...
这些事件属性不仅可以应用于HTML元素,还可以通过JavaScript添加到DOM对象上,实现动态事件绑定。 除了基本事件属性外,还有一些与鼠标和键盘交互相关的属性: - `altKey`:如果事件发生时`Alt`键被按下,该属性为...
浅谈JavaScript语言中文档节点访问技术 在本文中,我们将探讨JavaScript语言中文档节点访问技术的相关知识点。节点访问是JavaScript语言中的一种基本技术,用于访问和操作HTML文档中的元素。下面是节点访问技术的...
如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象。 [removed] = function() { alert(arguments.length); //1 } 因为arguments[0]这样使用这个参数比较麻烦,所以我们...
在作者的例子中,他首先使用了`.unbind('click')`来清除所有表格行的点击事件绑定,然后再重新绑定事件处理函数,这样就确保了每个表格行只有一个点击事件处理函数。 修改后的代码如下: ```javascript // 清除...
1. DOM0级事件处理程序:这是JavaScript中的简单事件绑定,直接在元素对象上设置事件属性。例如: ```javascript var btn = document.getElementById("mybtn"); btn.onclick = function() { alert('clicked'); ...
Vue.js 是一款流行的前端JavaScript框架,它以数据驱动和组件化为核心,简化了网页开发流程。其中,数据绑定是Vue的核心特性之一,它允许开发者在视图和模型之间建立双向关联,使得数据的变化能实时反映到界面上,...
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。
主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧