请说明JavaScript中处理事件的步骤

如题所述

举报该文章

第1个回答推荐于2018-04-24

事件处理程序的方式了：
1. 设置HTML标签属性为事件处理程序
　　文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
</style>
</head>
<body>
<div id="div1" onClick="console.log('div1');">div1
<div id="div2" oNClick="console.log('div2');">div2
<div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');">div3
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：
　　①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；
　　②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；
　　③这种形式是在事件冒泡过程中注册事件处理程序的；
2.设置JavaScript对象属性为事件处理程序
　　可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<div id="div3">div3
</div>
</div>
</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
　　div1.onclick = function(){
　　　　console.log('div1');
　　};
　　div2.onclick = function(){
　　　　console.log('div2');
　　};
　　div3.onclick = function(){
　　　　console.log('div3');
　　};
　　div1.onclick = function(){
　　　　console.log('div11111');
　　};

　　div1.onClick = function(){
　　　　console.log('DIV11111');
　　};

</script>
</body>
</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：
　　①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；
　　②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；
　　③这种形式也是在事件冒泡过程中注册事件处理程序的；
3.addEventListener()
　　前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：

<!DOCTYPE HTML>
<html>
<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
　　<title>test</title>
　　<style type="text/css">
　　　　#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
　　　　#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
　　　　#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
　　</style>
</head>
<body>
　　<div id="div1">div1
　　　　<div id="div2">div2
　　　　　　<div id="div3">div3
　　　　　　</div>
　　　　</div>
　　</div>
<script type="text/javascript">
　　var div1 = document.getElementById('div1');
　　var div2 = document.getElementById('div2');
　　var div3 = document.getElementById('div3');
　　div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
　　div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
　　div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
　　div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
　　div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
　　div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
　　div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);
</script>
</body>
</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：
　　①addEventListener()第三个参数的作用正如上面所说；
　　②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；
相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：
div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
console.log('div1-bubble');
}

4.attachEvent()
　　但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：

var div1 = document.getElementById('div1');
div1.attachEvent('onclick', div1BubbleFun);
function div1BubbleFun(){
　　console.log('div1-bubble');
}

　　相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：
div1.detachEvent('onclick', div1BubbleFun);

　　到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！
二.事件处理程序的调用
1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style>
</head>
<body>
<div id="div1">div1</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
if(div1.addEventListener){
div1.addEventListener('click', div1Fun, false);
}else if(div1.attachEvent){
div1.attachEvent('onclick', div1Fun);
}
function div1Fun(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log(event.type);
console.log(target);
}
</script>
</body>
</html>

2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。
实例一：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style>
</head>
<body>
<div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
<script type="text/javascript">
</script>
</body>
</html>

　　结果一：

　　从结果可以看出：
　　　　①第一种方法事件处理程序中this指向这个元素本身；
实例二：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style>
</head>
<body>
<div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
</script>
</body>
</html>

　　结果二：

　　从结果可以看出：
　　　　①第二种方法事件处理程序中this也指向这个元素本身；
　　　　②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；
实例三：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style>
</head>
<body>
<div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.addEventListener('click', function(){
console.log('div1.addEventListener:');
console.log(this);
}, false);
</script>
</body>
</html>

　　结果三：

　　从结果可以看出：
　　　　①第三种方法事件处理程序中this也指向这个元素本身；
　　　　②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；
实例四：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style>
</head>
<body>
<div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.attachEvent('onclick', function(){
console.log('div1.attachEvent:');
console.log(this === window);
});

</script>
</body>
</html>

　　结果四：

　　从结果可以看出：
　　　　①第四种方法事件处理程序中this指向全局对象Window；
　　　　②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序；
3.事件处理程序的调用顺序：多个事件处理程序调用规则如下：
　　①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；
　　②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；
　　③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；本回答被网友采纳

JavaScript中事件处理的过程有哪三个环节.?
第一阶段，HTML事件处理阶段。元素通过添加如onclick的属性调用函数。此方法存在时差问题和HTML与JavaScript耦合紧密的缺点，使得修改事件处理程序时，需同时修改HTML和JavaScript代码，为维护工作带来麻烦。第二阶段，DOM0级事件处理程序阶段。通过getElementById方法获取元素，然后直接赋值事件处理函数。在需要多次...

请简单说明javascript中处理事件的步骤
function showmsg(){ alert("HTML添加事件处理");} 从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要再js中修改，我还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到...

在javascript中,如何进行事件绑定?并举例说明。
使用DOM 0级事件处理程序另一种方式是通过JavaScript代码使用DOM 0级事件处理程序来绑定事件。这种方法是通过将函数赋值给元素的事件处理属性来实现的。例如：javascript var btn = document.getElementById("myButton");btn.onclick = function() { alert("你点击了按钮！");};在这个例子中，我们首...

什么是JavaScript事件流及事件处理程序详解
先提两个关键词，方便你查找更详细的分析：1）事件冒泡 2）事件捕获然后借用一下网上的一个图：如图：有三个圆，好比dom中的三个div，当你点击了绿色圆的同时，会有两个连带事件：点击了蓝圆点击了粉圆那么当你这三个圆（div）都绑定了点击事件时，该怎么触发呢，同时触发？显然不是，这是就...

jsevent使用方法详解
使用Jsevent绑定事件非常简单。可以通过选择器或者直接操作DOM元素来绑定事件。例如，为按钮添加点击事件，可以使用如下代码：javascript jsevent.on { \/\/ 事件处理逻辑 });上述代码中，`jsevent.on`方法用于绑定事件，第一个参数为事件类型，第二个参数为选择器或DOM元素，第三个参数为事件处理函数。三...

搞懂JS的事件循环(Event Loop)和宏任务\/微任务
事件冒泡时，会按照同步方式触发，可能会导致连续触发两次。在Node环境中，微任务队列有Next Tick Queue和Other Micro Queue的区别，Node 11.x之后的改动使微任务处理更为一致。深入了解事件循环和任务类型，有助于编写更高效、流畅的JavaScript代码。参考链接提供更深入的学习资料。

JavaScript中的执行机制
接下来，我们以一个代码示例来说明JavaScript的执行流程。首先，主函数被压入执行环境栈，随后执行`console.log(1);`任务，输出1。接着，我们添加了一个名为`test`的函数到执行环境栈，并执行`test()`函数。在执行`test()`时，会触发`setTimeout`，创建一个任务到任务队列。任务队列中的任务等待，...

JavaScript事件流:深入理解事件处理和传播机制
1. 事件流历程早期的DOM0级事件直接在元素上定义，但限制了事件处理的灵活性。随着DOM2级事件和addEventListener的引入，事件处理更加丰富和可扩展，支持事件捕获和目标阶段，以及添加多个处理程序。DOM3级事件的出现进一步扩展了事件类型和特性。React等框架则通过合成事件和Virtual DOM，提供了更高效、一致...

简述JavaScript的事件捕获和事件冒泡
让我们举个例子，在冒泡阶段处理Document和DIV2的点击事件，其他事件则在捕获阶段处理。连接到Window、DIV1和button的点击事件将在捕获过程中分别触发，而DIV2和Document监听器则在冒泡阶段依次触发。window.addEventListener("click",()=>{console.log('Window');},true);document.addEventListener("click",...

JavaScript event 事件详解
JavaScript事件，即事件处理器（event handlers）监听使用者行为。事件触发特定function执行，浏览器识别使用者动作，如点击、改变文本框、鼠标移动等，执行对应function。事件名称通常为小写，遵循标准写法以确保兼容性。JavaScript事件示例：1.onclick：监听按钮点击事件，触发特定function。例如，显示今天日期。2....

相似回答

大家正在搜