Javscript 事件处理程序

使用DOM级别0事件处理程序

先看一个简单的例子

<div id="div1">
<a href="http://www.baidu.com">百度</a><br>
<input type="text" placeholder="请输入文本" id="input1">
<input type="button" value="提交" id="input2" onclick="test()">
</div>
<script >
function test() {
   var textnode=document.getElementById('input1');
   if(textnode.value===''){
       alert('请输入信息')
   }
   else {
       alert('您输入的信息是'+textnode.value);
   }
}
</script>

• 该例是点击按钮之后查看表单内数据是否完整，主要作法为在在标签内添加事件处理程序名，以及调用函数，也可将其调用写入js代码中如textnode.onclik=function(){},此时该注意的是其DOM节点一定要调用正确
• 然而该方法的漏洞在于若对同一个事件添加俩个相同的事件处理程序后面的一个会覆盖前面的一个，且若多标签嵌套，其无法设置冒泡阶段还是捕捉阶段，因此我们常用下面这种方法

---

事件监听addEventListener(DOM级别2事件)

函数名	参数1	参数2	参数3
addEventListener	"event_type"	function_name	true or false
	该参数为事件名	该参数为调用函数名	true为捕捉阶段，false为冒泡阶段（更为常用）

• 删除事件

函数名	参数1	参数2	参数3
removeEventListener	"event_type"	function_name	true or false
	该参数为事件名	该参数为调用函数名	true为捕捉阶段，false为冒泡阶段（更为常用）

<b>值得注意的是第一个参数是事件名，而不是事件处理程序名，第二个参数最好使用单独函数，以便删除时调用，否则该监听器无法被删除，含有就是捕捉阶段指事件发生时顺序为组件由外到内，而冒泡阶段正好相反</b>

• 下面是一个例子

  <div id="div1">
  <!--<a href="http://www.baidu.com">百度</a><br>-->
  <input type="text" id="input0"><br>
  <input type="text" placeholder="请输入文本" id="input1">
  </div>
  <script >
   var textnode=document.getElementById('input1');
   function getfocus() {
        alert("获得焦点");
       textnode.removeEventListener("focus",getfocus,false);
    }
   textnode.addEventListener("focus",getfocus,false);
  </script>
  

event对象

• 但事件发生时，浏览器将自动创建event对象，该信息可以被脚本使用，帮助执行必要的操作，例如某个键被按下的信息就存储在该对象中
  主要属性如下
  <a href="http://www.w3school.com.cn/jsref/dom_obj_event.asp">event属性</a>
  下面为两个示例
  <div id="div1">
  <a href="http://www.baidu.com" id="link">百度</a>
  
  </div>
  <script >
  var linknode=document.getElementById('link');
  linknode.addEventListener("click",test,false)
  function test() {
  event.preventDefault();
  alert('阻止超链接跳转');
  }
  </script>

---

 <div id="div1">
<input type="text" id="input1">
</div>
<script >
   var linknode=document.getElementById('input1');
   linknode.addEventListener("keyup",test,false)
    function test() {
        alert('您所按键的键码是：'+event.keyCode);
    }
</script>

2017/6/1
02:13