DOMイベントアクション
我々はおよそonclickの話をする前に、onBlurイベント、ONFOCUSは、イベントアクションに属し
行動、コンテンツ、スタイルの分離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
background-color: red;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id="test">
abcd
</div>
<script>
var mydiv = document.getElementById("test");
mydiv.onclick = function () {
console.log("123456");
}
</script>
</body>
</html>
コード：あなたは、コンテンツの一部を見ることができ、スタイルコンテンツ（スタイル）は、別の方法で記述する必要があり、行動内容（スクリプト）作品が、分離され、標準のフロントエンドで書かれています。
マウスの操作を集中JS
- 方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
function t1(n) {
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "red";
}
function t2(n) {
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "";
}
</script>
</body>
</html>
コード説明
のonmouseover：マウスは、この関数は、TRタグT1の呼び出しに焦点を当て、およびパラメータが関数に渡されます0,1,2され、
T1機能：TagNameのTRタグを呼び出すことによって、およびTR [n]はに従ってラベルを取得インデックスは、添え字0は、TRタグを表し、
T1は、赤の背景色で機能します。
れるonmouseout：マウスは、TRタグの関数呼び出しT2を離れたとき、
T2の機能：背景色が空になります。
図2：TRタグに焦点を当てているマウスは、背景色が赤に変わり、次いでマウスの葉クリアカラー。
- 方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function () {
this.style.backgroundColor = "red";
};
myTrs[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
コード説明
myTrsは、すべてのtrタグを取得します。
myTrs長さlenを取得します。
ループ機能のために呼び出すことによって。
[i]は、これはmyTrsた直接使用することができない理由;これは、ラベルにマウスがトリガーmyTrsを表すように、現在、この無名関数のラベルコール機能をmyTrs;これは、これが誰であることを示すであろうと、現在の関数を呼び出し、誰表し現在のインデックスiが2に等しいので、ループのために、そして私たちは、私が2であるマウスを置くに関係なく、我々はラベルを誘発する効果を達成できない場合、コードが実行された後ので、このラベルの使用がトリガされ、現在のカーソル位置することができます赤にその背景色。
一般的方法2、コンテンツを実行する方法、動作、スタイルの分離を使用した実際のアイテムのように。
同じイベント、複数のバインディング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
background-color: red;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id="test">
abcd
</div>
<script>
var mydiv = document.getElementById("test");
mydiv.addEventListener("click",function () {
console.log('aaa')
},false);
mydiv.addEventListener("click",function () {
console.log('bbb')
},false);
</script>
</body>
</html>コードは、
単一のイベント、のaddEventListenerを用いて複数のバインディングよりもすることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color: red;
width: 300px;
height: 400px;
}
#content{
background-color: pink;
width: 150px;
height: 200px;
}
</style>
</head>
<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");
},false);
mycontent.addEventListener("click",function () {
console.log("content");
},false);
</script>
</body>
</html>コード説明
下から上へ虚偽の表示ディスプレイの行動イベントは、デフォルトではfalseに等しいです。
上：メインラベルやタグをクリックしながら、コンテンツに対応した、ピンク色の部分をクリックすると、通常は上から下へのコードで実行しなければならないが、それが偽である場合、つまり、真の場合は、上から下へ、下から上に実行されます実行。
字句解析を解決JS
次のように一般的な面接の質問での初見は以下のとおりです。
var a = 10;
function test(){
alert(a); //undefined
var a = 20;
alert(a); //20
}
test();質問：なぜ？JSは、この時間VARで、順次実行され、何の値a = 20が、スコープの親が存在する= 10を有していないもののテスト（）が実行され、それは未定義されるべきではないNUM = 20;全く実行しませんので、それは10でなければなりません！！そう、あなたと私は同じだったと思いますか？
分析：我々はすべて知っているように、上から下に実行されるJSコード、JavaScriptは伝統的なブロックレベルのスコープはありませんが、スコープ機能します。コードの前にはJavaScriptエンジン字句解析が実行されているので、実際には、2つの段階で、この方法の分析と実装に実行JS。
同様のコンパイルを実行する前にJavaScriptのコードは、字句解析のプロセスであり、字句解析三つの主要なステップがあります：
-
解析パラメータ
-
再解析変数宣言
- 分析関数宣言
次のように具体的な手順は次のとおりです。
操作の瞬間関数、アクティブオブジェクト（アクティブオブジェクト）を生成し、AOと称される
最初のステップ：分析パラメータ：
1.受信機能仮パラメータは、AOは、属性に追加され、この時間値は不定=未定義すなわちAO.nameあります
2.前の引数は、受信未定義のカバー属性AOに追加しました
ステップ2：分析変数宣言： VAR名、または変数名=「メアリー」;
1.分析パラメータの前のステップは、属性AOに名前を付けていない場合は、AOが付加されプロパティ、すなわちAO.name =不定不定であります
2.あなたは、すでに上記のAO属性、および変更をしないように名前を持っている場合
第三段階：分析関数宣言：
AO.name、ステップカバレッジの分析値を割り当てられた機能名がある場合は（）{}関数
次の例の分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 10;
function test(a){
console.log(a); //function a (){}
var a = 20;
console.log(a); //20
function a (){}
console.log(a); //20
}
test(100);
</script>
</body>
</html>
字句解析：
最初のステップは、解析関数パラメータ：
形式参数：AO.a = undefined
接收实参：AO.a = 100第二段階、ローカル変数の分析：
第4行代码有var a,但是此时已有AO.a = 100,所以不做任何修改，即AO.a = 100第3のステップは、関数宣言を分析することです。
第6行代码有函数a,则将function a(){}赋给AO.a,即AO.a = function a(){}：コードを実行するとき
第3行代码运行时拿到的a时词法分析后的AO.a，即AO.a = function a(){}；
第4行代码：将20赋值给a,此时a=20;
第5行代码运行时a已经被赋值为20,结果20；
第6行代码是一个函数表达式，所以不做任何操作；
第7行代码运行时仍是20；例えば：
var a = 10;
function test(a){
var a; //证明词法分析第二步。
alert(a); //100
a = 20;
alert(a); //20
}
test(100);
例えば：
var a = 10;
function test(a){
alert(a); //100
var a = 20;
alert(a); //20
a = function(){} //是赋值，只有在执行时才有效
alert(a); //function(){}
}
test(100);例えば：
var a = 10;
function test(a){
alert(a); //100
var a = 20;
alert(a); //20
var a = function(){} //是赋值，只有在执行时才有效
alert(a); //function(){}
}
test(100);追加情報：関数宣言と関数式
//函数声明
function a(){
}
//函数表达式
var b = function(){
}字句解析中のaとbとの差：
a在词法分析时，就发挥作用；
b只有在执行阶段，才发挥作用。