微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

18 JavaScript DOM事件

分类：JavaScript作者：编程之家原文地址AI导航网

JS是事件驱动为核心的一门语言

1 事件三要素

事件源、事件、事件驱动程序

  • 事件源：引发后续事件的html标签。
  • 事件：js已经定义好了（见下图）。
  • 事件驱动程序：对样式和html的操作。也就是DOM

代码书写步骤如下：（重要）

  • （1）获取事件源：document.getElementById(“Box”);
  • （2）绑定事件： 事件源Box.事件onclick = function(){ 事件驱动程序 };
  • （3）书写事件驱动程序：关于DOM的操作

常用事件

image


2 事件绑定方式

直接绑定匿名函数

 var oDiv = document.getElementById("Box");
//绑定事件的第一种方式
oDiv.onclick = function () {
    alert("我是弹出的内容");
};

先单独定义函数，再绑定

var oDiv = document.getElementById("Box");
//绑定事件的第二种方式
oDiv.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
    alert("我是弹出的内容");
};

行内绑定

<!--行内绑定-->
<div id="Box" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

3 onclick&ondblclick

光标点击事件

<div id="Box"></div>
<script>
    //首先取到节点对象
    var oDiv = document.getElementById('Box');
    //设置事件
    var isBlue = true;
    function add(){
        if (isBlue){
            //this 只向当前的元素节点对象
            this.style.backgroundColor = 'red';
            isBlue = false;
        }else {
            this.style.backgroundColor = 'blue';
            isBlue = true;
        }
    }
    oDiv.onclick = add; //光标单击事件
  	oDiv.ondblclick = add; //光标双击事件
</script>

4 onm ouse

onmouSEOver & onm ouSEOut/onmouseleave 鼠标划过和移开事件

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        #Box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="Box"></div>
<script>
    //1.找到事件源
    var oDiv = document.getElementById('Box');
    //2.事件（鼠标划过事件）
    oDiv.onmouSEOver = function () {
        //3.事件的驱动程序
        this.style.backgroundColor = 'green';
    }
    //2.事件（鼠标移开事件）
    oDiv.onmouseleave = function () {
        //3.事件的驱动程序
        this.style.backgroundColor = 'red';
    }
</script>

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{width: 300px;}
        .content .text{height: 50px;background-color: greenyellow}
        .content .c1{height: 50px;background-color: orange}
        .content .c2{height: 50px;background-color: rebeccapurple}
        .content .c3{height: 50px;background-color: indianred}
        .hide{display: none}
    </style>
</head>
<body>
<div class="content">
    <div class="text">标题</div>
    <div class="list hide">
        <div class="c1">111</div>
        <div class="c2">222</div>
        <div class="c3">333</div>
    </div>
</div>
<script>
    var text = document.querySelector('.text');
    var list = document.querySelector('.list');
    var content = document.querySelector('.content');
    text.onmouSEOver = function () {
        list.classList.remove('hide');
    }
    content.onmouseleave = function () {
        list.classList.add('hide');
    }
</script>
</body>

5 onfocus&onblur

光标的聚焦和离焦

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text{
            color: red;
        }
    </style>
</head>
<body>
<form>
    <p class="name">
        <label for="username">用户名：</label>
        <input type="text" name="user" id="username">
    </p>
    <p class="pwd">
        <label for="pwd">密码：</label>
        <input type="password" name="wpd" id="pwd">
    </p>
    <input type="submit" name="">
</form>
<script>
    var userName = document.getElementById('username');
    var newNode = document.createElement('span');
    //光标的聚焦
    userName.onfocus = function () {
        newNode.innerHTML = '请输入用户名'
        newNode.setAttribute('class','text')
        userName.parentNode.appendChild(newNode);
    }
    //光标的离焦
    userName.onblur = function () {
        newNode.innerHTML = '请输入正确的用户名'
        newNode.setAttribute('class','text')
        userName.parentNode.appendChild(newNode);
    }
</script>
</body>
</html>

6 onselect&oninput

内容选中和内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea cols="30" rows="10">个人简介</textarea>
<input type="text" name="" value="lxx">
<script>
    var textArea = document.getElementsByTagName('textarea')[0];
    var inputObj = document.getElementsByTagName('input')[0];
    textArea.onselect = function () {
        console.log('内容被选中');
    }
    inputObj.onselect = function () {
        console.log('内容被改变');
    }
    inputObj.oninput = function () {
        console.log('内容被实时改变了');
        console.log(this.value); //获取改变的值
    }
</script>
</body>
</html>

7 onl oad

窗口加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        setTimeout(function () {
            var oDiv = document.getElementById('Box');
            console.log(oDiv);
            oDiv.onclick = function () {
                this.innerHTML = 'alex';
            }
        },0)
        */
        //等待文档元素加载完后才会调用onload()
        window.onload = function () {
            var oDiv = document.getElementById('Box');
            console.log(oDiv);
            oDiv.onclick = function () {
                this.innerHTML = 'alex';
            }
        }
    </script>
</head>
<body>
<div id="Box">lxx</div>
</body>
</html>

8 获取标签文本信息

行内式静态

<div ondblclick="foo(this)">lxx</div>
<div id="Box">wxx</div>
<script>
    /*
    //获取DOM标签对象的文本
    function foo() {
        var oD = document.getElementById('Box');
        console.log(oD.innerHTML);
    }
    */
    
    //获取自己的标签的文本信息
    function foo(self) {
        console.log(self.innerHTML);
    }
</script>

动态（绑定自己时，要用this）

<div id="Box">wxx</div>
<ul class="title">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
    var ele = document.getElementById('Box');
    ele.onclick = function () {
        console.log(this.innerHTML);
    }

    var uL = document.querySelectorAll('.title li');
    for (var i=0; i<uL.length; i++){
        uL[i].onclick = function () {
            //事件被点击后触发执行
            console.log(this.innerHTML);
        }
    }
</script>

9 onsubmit

提交事件

<body>
<form action="" id="i1">
    <input type="text" name="user" class="c1">
    <input type="submit">
</form>

<script>
    var ele = document.querySelector('#i1');
    var user = document.querySelector('.c1');
    ele.onsubmit = function (e) {
        if (user.value.length<=5){
            alert('用户名长度要大于等于5');
            user.value = '';
            //阻止默认提交事件：方式一
            return false;
            //阻止默认提交事件：方式二
            e.preventDefault();
        }
    }
</script>
</body>

10 onchange

当文本内容或选中的内容发生变化时，触发事件

<body>
<select name="" id="provice">
    <option value="">请选择省份</option>
    <option value="hubei">湖北省</option>
    <option value="hebei">河北省</option>
    <option value="guangdong">广东省</option>
</select>
<select name="" id="city">
    <option value="">请选择城市</option>
</select>

<script>
    var data = {'hubei':['襄阳','武汉','荆州'],
    'hebei':['保定','石家庄','廊坊'],
    'guangdong':['广州','深圳','东莞']};
    var provice = document.querySelector('#provice');
    var city = document.querySelector('#city');
    //当文本内容或选中的内容发生变化时，触发事件
    provice.onchange = function () {
        var cit = data[this.value];

        //清空方法
        city.options.length = 1;

        for (var index in cit){
            console.log(cit[index]);
            //创建标签
            var oP = document.createElement('option');
            oP.innerHTML = cit[index];
            city.appendChild(oP);
        }
    }
</script>
</body>

11 onkeys

输入键事件

<input type="text" class="c1">
<script>
    var ele = document.getElementsByClassName('c1')[0];
    //检测键盘摁下事件
    ele.onkeydown = function () {
        console.log('ok');
    }
    
    //检测键盘摁下后松开事件
    ele.onkeyup = function (e) {
        console.log(e.keyCode); //输出key的数字
        console.log(e.key); //输出key的相应字符
        if (e.keyCode === 13){
            console.log('enter');
        }
    }
</script>

12 冒泡事件

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 300px;
            background-color: #83c44e;
        }
        .c2{
            width: 150px;
            height: 150px;
            background-color: indianred;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
<script>
    var ele1 = document.querySelector('.c1');
    ele1.onclick = function () {
        alert('c1区');
    }
    var ele2 = document.querySelector('.c2');
    ele2.onclick = function (e) {
        alert('c2区');
        //阻止事件冒泡（只执行自己的代码，不在延续其它事件）
        e.stopPropagation();
    }
</script>
</body>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native