javascript教程实例（请说明JavaScript中处理事件的步骤）

本文目录

• 请说明JavaScript中处理事件的步骤
• js怎么获取数组中元素的位置
• javascript教程求助

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

事件处理程序的方式了：1. 设置HTML标签属性为事件处理程序　　文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：《!DOCTYPE HTML》《html》《head》 《meta 实例一：《!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()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；

js怎么获取数组中元素的位置

多端阅读《javascript教程》:

• 在PC/MAC上查看：下载w3cschool客户端，进入客户端后通过搜索当前教程手册的名称并下载，就可以查看当前离线教程文档。下载javascript教程离线版客户端

• 在手机APP上查看：请从各大安卓应用商店、苹果App Store搜索并下载w3cschool手机客户端，在App中搜索当前教程手册的名称查看。下载w3cschool手机App端

• 在手机上查看文档：

javascript教程求助

很有代表性的问题：(亮点在最后一句）_____________________________function Student(name) { this.name = name; this.move = function() { alert(this.name+”准备移动了”); } } //以上构造了一个Student类，有特权函数 move ,公共属性 nameStudent.prototype.move = function() { alert(this.name+”开始移动了!”); } //以上代码将move方法指向了原型方法，如果调用此move方法，则默认上面的move特权方法，//如果用delete删除move方法后 delete st.move（在构造st对象后），则调用原型方法（此方法）var st = new Student(“李四); //构造学生对象李四st.study();//study不存在，我想这里应该是 st.move(); 如果是st.move()的话，输出：李四准备移动了//如果确实是 st.study() 而不是 st.move()，那么脚本啥反应也没，因为不存在study方法