zoukankan      html  css  js  c++  java
  • 事件入门

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

      事件介绍

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

    DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件。IE9FirefoxOperaSafari 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');
    }
    

    二、脚步模型

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

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

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

       

  • 相关阅读:
    html页面原生video标签隐藏下载按钮
    css解决多行溢出显示省略号
    移动端轮播图vue-awesome-swiper
    日常踩坑 — 相邻元素之间的margin合并问题。
    (a ==1 && a== 2 && a==3) 有可能是 true 吗?
    如何生成SSH key及查看SSH key
    端口号被占用报错解决方法。
    基于vue开发的element-ui树形控件报错问题解决
    Win10 桌面 通知中心 无法打开
    SolidWorks 杂
  • 原文地址:https://www.cnblogs.com/linkhtml/p/6423930.html
Copyright © 2011-2022 走看看