带你走进JavaScript（四十五）擅长的领域"/>
夜光带你走进JavaScript（四十五）擅长的领域
夜光序言：
真正高明的人，就是能够借助别人的智慧，来使自己不受蒙蔽的人
正文：
JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
嗯唔~~ 会改变 <p> 元素的样式：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p id="p1">Genius Team 001</p>
<p id="p2">Genius Team 002</p>
<script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";
</script>
<p>夜光：以上段落通过脚本修改</p></body>
</html>嗯唔：使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
- ……
例子中：改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><h1 id="id1">我的标题~~</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">点我~~</button></body>
</html>我们再看一个：JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
当用户在 <h1> 元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><h1 onclick="this.innerHTML='Genius Team'">点击文本~~试试</h1></body>
</html>从事件处理器调用一个函数：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<head><script>function changetext(id){id.innerHTML="Genius Team";}</script>
</head>
<body><h1 onclick="changetext(this)">点击文本~~试试</h1></body>
</html>HTML 事件属性
如需向 HTML 元素分配 事件
我们可以使用事件属性。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>有点意思：点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>function displayDate(){document.getElementById("demo").innerHTML=Date();}
</script>
<p id="demo"></p></body>
</html>嗯唔~~ HTML 事件属性
如果，我们要向 HTML 元素分配 事件
我们可以使用事件属性。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>点击按钮执行 <em>displayDate()</em> 函数</p>
<button onclick="displayDate()">点这里</button>
<script>function displayDate(){document.getElementById("demo").innerHTML=Date();}
</script>
<p id="demo"></p></body>
</html>嗯唔：使用 HTML DOM 来分配事件
HTML DOM
允许我们使用 JavaScript 来向 HTML 元素分配事件：
名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<head>
</head>
<body><p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>document.getElementById("myBtn").onclick=function(){displayDate()};function displayDate(){document.getElementById("demo").innerHTML=Date();}
</script>
<p id="demo"></p></body>
</html>JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
我们可以使用 removeEventListener() 方法来移除事件的监听。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>嗯唔：该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>document.getElementById("myBtn").addEventListener("click", displayDate);function displayDate() {document.getElementById("demo").innerHTML = Date();}
</script></body>
</html>嗯唔：语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>嗯唔：该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<script>document.getElementById("myBtn").addEventListener("click", function(){alert("Genius Team");});
</script></body>
</html>向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>嗯唔：该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<script>document.getElementById("myBtn").addEventListener("click", function(){alert("Genius Team");});
</script></body>
</html>
嗯唔：向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。
或者其他支出的事件对象如: xmlHttpRequest 对象。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>嗯唔：在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = Math.random();});
</script></body>
</html>传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title>
</head>
<body><p>夜光：实例演示了在使用 addEventListener() 方法时如何传递参数</p>
<p>点击按钮执行计算</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>var p1 = 1111;var p2 = 1;document.getElementById("myBtn").addEventListener("click", function() {myFunction(p1, p2);});function myFunction(a, b) {var result = a * b;document.getElementById("demo").innerHTML = result;}
</script></body>
</html>
更多推荐
夜光带你走进JavaScript（四十五）擅长的领域
发布评论