事件入门

Posted 2020-09-01 温故而知新

 javascript事件是由访问web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候。再去执行一系列的代码。

 

  事件介绍

       事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现， 作为分担服务器端运算负载的一种手段。直到几乎所以的浏览器都支持事件处理。

而DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和 Chrome全部已经实现了“DOM2级事件”模块的核心部分。IE8以前浏览器依然使用其专有事件模型。

 Javascript有三种事件模型：内联模型、脚步模型和DOM2模型。

 

 一、内联模型    

       这种模型是最传统简单的一种处理事件的方式。在内联模型中，事件处理函数是html 标签的一个属性，用于处理指定事件，虽然内联在早期使用较多，但是它是和HTML混写的 ，并没有与HTML分开。

 //在HTML中把事件处理函数作为属性执行js代码
    <input type="button" value="按钮" onlick="alert(‘hello world ‘)"/>

    //在HTML中把事件处理函数作为属性执行js函数
   <input type="button" value="按钮" onlick="box();"/>  //执行js函数

  PS:函数不得放到window.onload里面，这样就看不到了。

window.onload=function(){
      function box(){
   alert(‘hello world‘);
}
}
  
function box(){
   alert(‘hello world‘);
}

 

二、脚步模型

    由于内联模型违反了html和javascript代码层次分离的原则。为了解决这个问题，我们可以在JavaScript中处理事件。这种处理方式就是脚步模型。

 var input=document,getElementsByTagName(‘input‘)[0];  //得到input对象
       //对象.事件处理函数=函数名或者匿名函数
      input.onlick=function(){   //匿名函数执行
      alert(‘hello wrold‘);
};

 

 PS:通过匿名函数，可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数（赋值的函数名不要跟着括号）。