学习JS第六天

简介: 学习JS第六天

跟着黑马视频学JS第六天


DOM



删除节点:node.removeChild(child); 
复制节点:node.cloneNode();//括号内容为空或者是false是浅拷贝 只复制标签不复制内容 true为深拷贝
DOM总结:P246


事件高级


addEventListener('click', function() {})//事件监听方式 有兼容性问题
// 2. 事件侦听注册事件 addEventListener 
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)


removeEventListener 删除事件


<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
    divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }
</script>


DOM事件流


1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。
 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
 document -> html -> body -> father -> son
 var son = document.querySelector('.son');
 son.addEventListener('click', function() {
 alert('son');
 }, true);
 var father = document.querySelector('.father');
 father.addEventListener('click', function() {
     alert('father');
 }, true);
 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  
 son -> father ->body -> html -> document


事件对象


var div = document.querySelector('div');
    div.onclick = function (e) {
        // console.log(e);
        // console.log(window.event);
        // e = e || window.event;
        console.log(e);
    }
    //1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
    // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
    // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
    // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    有兼容性问题


常见的事件对象属性和方法


常见事件对象的属性和方法
    1. e.target 返回的是触发事件的对象(元素)  this 返回的是绑定事件的对象(元素)
    // 区别 : e.target 点击了那个元素,就返回那个元素 this 那个元素绑定了这个点击事件,那么就返回谁
    2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
            e.preventDefault(); //  dom 标准写法   常用
        })
    3. 阻止冒泡  dom 推荐的标准 stopPropagation() 
    var son = document.querySelector('.son');
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
        e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);   
    4.事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        // alert('知否知否,点我应有弹框在手!');
        // e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })


1687264116854.png


相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
66 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
43 2
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
66 1
|
4月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
73 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
4月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
48 2
|
4月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
31 2
|
4月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
56 1
|
4月前
|
JavaScript
js学习--抽奖
js学习--抽奖
32 1
|
4月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
38 1
|
4月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
81 0

热门文章

最新文章