2-44钟静雯_day08

Day08作业 JavaScript浏览器编程
作业01 事件委托创建li元素

• C
• AI
• Java
• Python

添加   知识点总结（JavaScript浏览器编程） DOM 动态创建标记

方法 语法
创建元素 document.createElement(‘元素名’)
创建文本节点 document.createTextNode(‘文本节点的内容’)
添加子节点 appendChild(‘要添加的子节点’)，返回追加的节点对象
插入子节点 insertBefore(新节点，要插入到它之前的节点)
删除子节点 removeChild(删除的子节点)
替换子元素 replaceChild(新子节点, 老子节点)
克隆节点 cloneNode()——深度复制(true)、浅度复制(false)
合并相邻的文本节点并删除空的文本节点 normalize()
插入节点:(到父节点的子节点的位置)

最后或最开始(只适用于元素节点)

父节点.append():在父节点的最后一个子节点之后插入一组Node对象或DOMString对象。

父节点.prepend():在父节点ParentNode第一个后代前插入一组Node对象或者DOMString对象。

中间(适用于元素节点和文本节点)

子节点.before(要插入的节点):在子节点之前插入节点。

子节点.after(要插入的节点):在子节点之后插入节点。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 删除节点:

子节点.remove()，把子节点从它所属的DOM树中删除。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 替换节点:

子节点.replaceWith()，用一套Node对象或者DOMString对象，替换了该节点父节点下的子节点。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 操作CSS 操作行内样式

设置元素的 class 属性(最简单的方式)

先设置好class样式选择器。

然后通过classList.add()、classList.remove()、classList.toggle()切换。

请在这里输入电话号码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 通过元素节点的style属性对象(行内样式)

style对象的属性与CSS规则一一对应，但是CSS属性的名字可能要改写。

去掉横杠，横杠后第一个字母大写。

如果属性名是JS保留字，属性名前面就必须加上字符串CSS(cssFloat)。

设置时必须包含单位。

• JavaScript高级程序设计
• JavaScript权威指南

1 2 3 4 5 6 7 8 9 10 11 操作非行内样式

window.getComputedStyle():返回一个对象，包含所有计算值。

获得的值是只读的绝对值。

简写属性得不到。

cssText为undefined。

test

1 2 3 4 5 6 7 8 9 10 事件 事件驱动编程三要素 事件类型:一个字符串，指定发生的事件类型。

如:“click”, “dblclick”，“mouseover”，“mouseup”, “keydown”, “keyup”…

两种类型

浏览器事件:预定义的内置事件,浏览器自动触发。

合成事件:程序员自定义的事件,自己定义、自己触发。

事件目标:这是发生事件或与事件关联的对象。

事件处理程序或者事件监听器:一个函数，用于处理或响应事件。

注册事件处理程序:

1.在目标对象上设置事件处理程序属性。

click me 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 2.在目标HTML文档元素上设置事件处理程序属性。(不推荐使用!) click me2 1 2 3 3.目标对象.addEventListener(‘事件类型’, 事件处理程序, {})。

​ 第一个参数:事件类型。事件类型（或名称）是一个字符串，不包括设置事件处理程序属性时使用的on前缀。

​ 第二个参数:事件处理程序，即在发生指定类型的事件时应调用的函数(箭头函数、函数声明、函数表达式等)。

​ 第三个参数:布尔值、对象。

​ 布尔值:true表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。

​ 对象:{ }
​ capture:设置该事件是否在捕获阶段触发监听函数（默认为false）。
​ once:设置监听函数是否只触发一次，然后就自动移除（默认为false）。
​ passive:设置监听函数不会调用事件的preventDefault方法（默认为false）。

click me 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 4.removeEventListener(事件类型，事件处理程序，{}):解除事件绑定

注意:必须与addEventListener的参数完全一样,否则不起作用。

事件驱动编程步骤
获取事件目标。

在事件目标上为指定事件类型注册事件处理程序。

浏览器监听事件目标上的事件。

当事件目标上发生指定类型的事件时，浏览器将调用处理程序函数。

click

<script>
    // 为按钮添加click事件
    // 1.获取事件目标
    const oButton = document.querySelector('button');
    // 函数声明
    function callback() {
        console.log('Hello,Event');
    }
    // or
    // 函数表达式 回调函数
    const callback = function() {
        console.log('Hello,Event');
    }
    //注册事件处理程序:同一事件addEventListener可以绑定多个事件处理程序
    oButton.addEventListener('click',callback);
    oButton.addEventListener('click',()=>{
        console.log('hello,event1');
    },true)
</script>

事件传播机制 1.事件传播:确定在哪些对象上触发事件处理程序。

2.事件流:描述了页面接收事件的顺序，分三个阶段:（先捕获，再冒泡）

捕获阶段:从根元素开始(Window->Document)，向下传播到触发事件的元素。
到达目标阶段。
冒泡阶段:从触发事件的元素开始，向上传播到根元素。

box

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 Event对象 事件发生时的一个快照：所有相关信息(环境等)都被收集到 Event 对象中。 只有事件发生时，该对象才会存在；事件不发生时，该对象不存在。 作为事件处理程序的一个参数，隐式传递。

my div

1 2 3 4 5 6 7 8 9 10 Event对象创建自定义事件(合成事件) Event对象本身就是一个构造函数，可以用来生成新的实例。

event = new Event(type, options);
1
第一个参数type是字符串，表示事件的名称；
第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性:
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡（默认是不冒泡！）。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
步骤

创建自定义事件：自定义事件对象 = new Event(‘自定义事件类型字符串’, options)。
绑定到目标：事件目标.addEventListener(‘自定义事件类型的字符串’, 事件程序程序，options)。
分派事件：事件目标.dispatchEvent(自定义事件对象)。

my div

my div

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Event对象的方法—阻止事件的默认行为 preventDefault()：用于阻止特定事件的默认动作，相当于在事件处理程序中：return false;

常见用法：表单校验中，如果表单字段校验失败，就阻止表单的提交。

Microsoft HomePage stopPropagation()：用于取消所有后续事件捕获或事件冒泡。 stopImmediatePropagation()：用于取消所有后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序，适用于绑定了多个事件处理程序。