夜光带你走进JavaScript（四十五）擅长的领域

最新推荐文章于 2019-12-02 18:10:44 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-02 18:10:44 发布

阅读量198

点赞数

分类专栏： Genius-JavaScript

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102618862

版权

Genius-JavaScript 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

夜光序言：

真正高明的人，就是能够借助别人的智慧，来使自己不受蒙蔽的人

正文：

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>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进JavaScript（四十五）擅长的领域

夜光序言：真正高明的人，就是能够借助别人的智慧，来使自己不受蒙蔽的人正文：JavaScript HTML DOM - 改变CSSHTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式，请使用这个语法：document.getEle...
复制链接

扫一扫

专栏目录