Dom 事件和JavaScript的词法分析过程

dom自带了很多事件,常见的如下所示

当触发这些事件的时候,我们可以执行自定义的各种函数。

一般说来,绑定事件有3种方法。

第一种方法,直接在标签上面绑定,比如

<input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘>

function ClickOn(self){
}

第二种方法,是先获取Dom对象,然后进行绑定。比如

<input id=‘i1‘ type=‘button‘ >

document.getElementById(‘i1‘).conclick=function ClickOn(){

}

第三种,则是通过 addEventListener() 绑定,这种方式可以绑定多个事件到一个点击操作上。他的第一个参数是click,第二个是匿名函数,第三个true表示从执行顺序从外到内,false表示从内到外

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
        background-color: red;
        width:300px;
        height:400px;
    }
    #content{
        background-color: pink;
        width:150px;
        height:200px;
    }
</style>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById("main");
        var mycontent = document.getElementById("content");
        mymain.addEventListener("click",function(){console.log("main")},true);
        mycontent.addEventListener("click",function(){console.log("content")},true);
    </script>
</body>
</html>

当我们编写页面的时候,一个基本原则是行为(js) 样式(css) 和结构(html)都需要分离,因此第一种直接在标签上绑定样式和事件的方式应该尽量避免使用。

最后,再看看JavaScript的词法分析过程。

比如说,执行下面的函数,他的输出结果是首先输出function,然后27和27

      function t1(age){
            console.log(age); // function age()
            var age = 27;
            console.log(age); // 27
            function age(){}
            console.log(age); // 27
        }
        t1(3);

为什么会这样了,他的词法分析是三部分:

  1. 形式参数:这里首先age=‘undefined’,然后age=3;
  2. 局部变量:如果有形式参数,那么直接age=‘undefined’
  3. 函数申明:优先级最高,直接age=function()

经过3步之后,age直接变成优先级最高的函数,接下来age变成27,然后因为没有执行function age(),因此age不变。

时间: 2024-10-07 09:02:37

Dom 事件和JavaScript的词法分析过程的相关文章

JavaScript&amp;jQuery.DOM事件

DOM事件 在JavaScript中常见的事件有: UI事件,当与浏览器UI本身(而不是网页)交互时发生的事件. 鼠标事件,当用户操作鼠标.触控板.或触摸屏幕时发生. 键盘事件,当用户操作键盘时发生. 焦点事件,当一个元素(比如链接或表单)得到或失去焦点时发生. 表单事件,当用户与表单元素进行交互时发生. 变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. DOM事件如何触发javaScript代码 对象有属性.方法.事件 本质上他们是同一个东西:属性=方法=事件. 事件->方法->

Javascript 的词法分析

Javascript 的词法分析 过程: 1.先分析参数 2.再分析变量声明 3.分析函数声明 具体步骤: 1.函数运行前的瞬间,生成 Active Object (AO) 2. 2.1 函数声明的参数,形成AO的属性,值全部是 undefined 2.2 接受参数,形成AO相应的属性值 3.分析变量声明,如 var arg, 如果AO上还没有这个arg的属性,则添加AO属性,值是undefined 如果AO上已经有arg这个属性,则不做任何影响 4.分析函数声明,如 function foo(

HTML DOM 事件

资源来自:http://www.runoob.com/jsref/dom-obj-event.html http://www.runoob.com/jsref/met-element-addeventlistener.html ← HTML DOM 属性对象 HTML DOM Anchor 对象 → HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用

常用的JS HTML DOM 事件

HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 提示: 在 W3C 2 级 DOM 事件中规范了事件模型. DOM:指明使用的DOM属性级别. 鼠标事件 属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄. 2 oncontextmenu 当用户点击鼠标右键打开上下文菜单时触发.   ondblclick 当用户双击某个对象时调用的事件

HTML DOM 事件(实现一个简单的回到顶部功能)

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序.事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 利用onscroll事件写一个回到顶部功能,代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" c

web前端入门到实战:HTML DOM 事件(实现一个简单的回到顶部功能)

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序.事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 利用onscroll事件写一个回到顶部功能,代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" c

javascript的IE事件和DOM事件模型

通用的事件模型: 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" e

JavaScript DOM事件流

昨天一天被Amy姐姐讲懵圈了.讲的自信心快没有了,严重怀疑智商.所以今天写一篇相关的基础知识博客,好好补一下.心情有点low,但还是要加油!!!没有人会同情弱者. 历史由来:DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一 样,在它们成为标准前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的 是,W3C决定组合使用这两种方法,并且大多数新

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来