正文

javascript过程,js执行的过程

IP云
IP云V管理员/5 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js的执行原理是什么？

JS是解释执行的，即读取一个语句就执行一个。以前的严格JS是以分号为语句的分隔符，但现在一些浏览器已经接受以换行符为分隔符（似乎是很多人喜欢用基于对象的编程了，而在JS中写对象的函数是需要加分号的，所以很多人都爱忘）。

JS本身只提供语法解析与少部分内部函数支持，其他的均由宿主支持。比如在网页JS中的window, document, navigator等对象，均是由浏览器提供基于其它语言的代码，这些代码通常被隐藏，但很大程度上决定了JS的运行效率。如果你有兴趣，打开Chrome，按F12，调处Console，然后输alert（注意没有()），你就会发现[native code]这个东西。

相关问答

Q1: javascript是面向对象还是面向过程？

javascript是面向过程的，因为是解释性预言，按照页面加载一行一行的执行，但是可以模拟面向对象的代码写法

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

事件处理程序的方式了：

1. 设置HTML标签属性为事件处理程序

文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1" onClick="console.log('div1');"div1

div id="div2" oNClick="console.log('div2');"div2

div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3

/div

/div

/div

script type="text/javascript"

/script

/body

/html

结果（鼠标点击div3区域后）：

从结果中可以看出：

①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；

②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；

③这种形式是在事件冒泡过程中注册事件处理程序的；

2.设置JavaScript对象属性为事件处理程序

可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.onclick = function(){

console.log('div1');

};

div2.onclick = function(){

console.log('div2');

};

div3.onclick = function(){

console.log('div3');

};

div1.onclick = function(){

console.log('div11111');

};

div1.onClick = function(){

console.log('DIV11111');

};

/script

/body

/html

结果（鼠标点击div3区域后）：

从结果中可以看出：

①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；

②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；

③这种形式也是在事件冒泡过程中注册事件处理程序的；

3.addEventListener()

前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);

div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);

div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);

div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);

div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);

/script

/body

/html

结果（鼠标点击div3区域后）：

从结果中可以看出：

①addEventListener()第三个参数的作用正如上面所说；

②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；

相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：

div1.addEventListener('click', div1BubbleFun, false);

div1.removeEventListener('click', div1BubbleFun, false);

function div1BubbleFun(){

console.log('div1-bubble');

}

4.attachEvent()

但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：

var div1 = document.getElementById('div1');

div1.attachEvent('onclick', div1BubbleFun);

function div1BubbleFun(){

console.log('div1-bubble');

}

相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：

div1.detachEvent('onclick', div1BubbleFun);

到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！

二.事件处理程序的调用

1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

if(div1.addEventListener){

div1.addEventListener('click', div1Fun, false);

}else if(div1.attachEvent){

div1.attachEvent('onclick', div1Fun);

}

function div1Fun(event){

event = event || window.event;

var target = event.target || event.srcElement;

console.log(event.type);

console.log(target);

}

/script

/body

/html

2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。

实例一：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/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"/

titletest/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"/

titletest/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"/

titletest/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()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；

Q3: 如何正确学习JavaScript

JavaScript作为网站前端的核心知识是非常重要的，但是如何学习JavaScript是很多初学者面对的一个难题，下面我说一下个人对于如何学习JavaScript的一点心得，希望能帮到大家。

1、首先学习基础，尤其是JavaScript与其他语言不同的基础知识。

学习每个编程语言可能都要从基础的变量函数结构等学起，JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方，这些东西是尤其需要我们注意的，比如说自调函数、比如说变量值为空不是null而是undefined的等，这些东西都是和主流的编程的语言如c++、java等是有区别的，所以想要学好JavaScript，这些基础的知识一定要把握好学习好才行。

2、关于学习JavaScript的进阶

JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西，这些东西都是深入学习JavaScript的难点，简单的说一下JavaScript是基于对象的浏览器脚本语言，但是为了使JavaScript也能够支持面向对象编程，人们就使用了很多的方法来模拟面向对象的的特点，这些就变成了JavaScript的一些难点，比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等，这些东西都是和其他支持面向对象的语言是不同的，所以就导致了一些难点。关于进阶学习JavaScript，还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文，这些东西都是JavaScript比较深入的知识、

最后说明，JavaScript作为前端的核心语言绝对没有没有想象的那么简单，要想学好JavaScript除了以上提到的知识和注意点，还需要的就是多动手和实践，我们都知道网页上的所有特效都是借助JavaScript来实现，那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效，当然学习使用jQuery等JavaScript类库进行开发也十分的重要，但是这绝对不能是取代我们学习JavaScript的方法。