js学习(六)

简介: js学习(六)

事件简单学习

* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
  * 造句:  xxx被xxx,我就xxx
    * 我方水晶被摧毁后,我就责备对友。
    * 敌方水晶被摧毁后,我就夸奖自己。
* 如何绑定事件
  1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
    1. 事件:onclick--- 单击事件
  2. 通过js获取元素对象,指定事件属性,设置一个函数`

事件绑定的第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
    <script>
        //第一种事件绑定方式,耦合度比较高不利于维护
        //document.getElementById("id值"):通过元素的id获取元素对象
        function fun() {
            alert("我爱死你了");
            alert("我又爱死你了");
        }
    </script>
</head>
<body>
<img id="light" src="img/off.gif" onclick="fun();">
</body>
</html>
事件绑定的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
</head>
<body>
    <img id="light" src="img/off.gif">
<script>
    //第二种事件绑定,耦合度比较低,利于维护,要注意对象的位置
    //document.getElementById("id值"):通过元素的id获取元素对象
    function fun() {
        alert("我爱死你了");
    }
    var light = document.getElementById("light");
    light.onclick = fun;
</script>
</body>
</html>
相关文章
|
12天前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
1月前
|
JavaScript 前端开发 关系型数据库
如何学习 Node.js?
【8月更文挑战第4天】如何学习 Node.js?
27 3
|
20天前
|
JSON 前端开发 JavaScript
|
4天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
18天前
|
JavaScript 前端开发 iOS开发
学习强大的JavaScript一行代码,能够节省你的时间和代码量
这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。
17 2
|
21天前
|
JavaScript 前端开发 小程序
基于js开发快速学习鸿蒙基础
【8月更文挑战第26天】
33 1
|
22天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
39 1
|
25天前
|
存储 JavaScript 前端开发
学习JavaScript 内存机制
【8月更文挑战第23天】学习JavaScript 内存机制
22 3
|
26天前
|
JSON JavaScript 前端开发
JS 和 ES6 补充学习
【8月更文挑战第21天】
31 4
|
1月前
|
JavaScript 前端开发
Javascript学习
Javascript学习