Unit07： document 对象、事件

image

document对象

JAVAJSD_V01WEBBASICDAY07_003.png

增加

创建新节点

document.createElement(elementName)

elementName : 要创建的元素标签名称
返回新创建的节点

    //创建新节点
    var newNode = document.createElement("input");
    
    设置节点的信息
    newNode.type = "text";
    newNode.value = "mary";
    newNode.style.color = "red";

添加新节点

parentNoded.appendChild(newNode)
- 追加：新节点作为父节点的最后一个子节点添加
parentNode.insertBefore(newNode,refNode)
- refNode:参考节点，新节点位于此节点之前添加

2017-11-09 17-18-19 的屏幕截图.png

JAVAJSD_V01WEBBASICDAY07_008.png

删除

删除节点

node.removeChild(childNode)
- 删除某个子节点
- chileNode必须是node的字节点

事件

JAVAJSD_V01WEBBASICDAY07_013.png

事件概述

事件：指页面元素状态改变,用户在操作鼠标或键盘时触发的动作
- 鼠标事件
- 键盘事件
- 状态改变事件
event对象
- 事件触发后将会产生一个event对象

事件属性

通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作

JAVAJSD_V01WEBBASICDAY07_016.png

事件定义

在html属性定义中直接处理事件

    <input type="button" value="按钮" onclick="method();">

js代码中动态定义

    //btnObj为一个按钮对象
    btnObj.onclick = method;
    
    //或
    btnObj.onclick = function(){
        alert("hello");
    }

取消事件：onXXX = "return false;"

    <input type="submit" value="删除" onclick="return deleteDate();">

    function deleteData(){
        var result = confirm("确定要删除吗?")
        result result;
    }

event

event对象

任何事件触发后将会产生一个event对象
event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
- 获得event对象
- 使用event对象获得相关信息，如单击位置、触发对象等
常用属性：clientX/clientY/cancelBubble等

获取event对象

需要考虑浏览器兼容性

IE浏览器

js或者html代码中直接使用event

    <p onclick="alert(event.clientX);">p text</p>
    <div onclick= "func();">div text</div>

    //IE浏览器
    function func(){
        alert(event.clientX+":"+event.clientY);
    }

直接使用event

Firfox浏览器

html代码中直接使用event

   <p onclick="alert(event.clientX);">p text</p>

js代码中直接使用event关键字

   <div onclick="func();">div text</div>

   //firefox浏览器
   function func(){
       alert(event.clientX+":"+event.clientY);
   }

Firfox浏览器的js代码中不能直接使用event关键字

在HTMLL代码中，在事件句柄定义时，使用event关键字将事件对象作为参数传入方法

    <div onclick="func(event);"></div>

    //firefox浏览器
    function func(){
        alert(e.clientX+":"+e.clientY);
    }

可以解决浏览器兼容问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function func(e) {
alert(e.clientX + ":" + e.clientY);
}
</script>
</head>
<body>
<p onclick="alert(event.clientX);">p text</p>
<div onclick="func(event);">div text</div>
</body>
</html>
```

使用event对象

对于event对象，经常需要获得事件源
- 事件源，即触发事件的元素（事件的目标节点）
IE浏览器：event.srcElement

Firefox浏览器：evern.target

    <div onclick="func(event);">div text</div>

    //IE浏览器
    function func(e){
        alert(e.srcElement.nodeName);   //DIV
    }
    
    //firefox浏览器
    function func(e){
        alert(e.target.nodeName);   //DIV
    }

    <div onclick="func(event);">div text</div>

    //考虑浏览器兼容问题
    function func(e){
        var obj = e.srcElement||e.target;
        alert(obj.nodeName);    //DIV
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //考虑浏览器兼容问题
    function func(e) {
        var obj = e.srcElement || e.target;
        alert(obj.nodeName); //DIV
    }
</script>
</head>
<body>
    <div onclick="func(event);">div text</div>
</body>
</html>

事件处理机制

冒泡机制

JAVAJSD_V01WEBBASICDAY07_028.png

        <div style="border:1px solid black;height:100px;" onclick="alert('div');">
            <p style="border:1px solid red;height:50px;" onclick="alert('p');">
                ptext
                <input type="button" value="button1" onclick="alert('button');"/>
            </p>
        </div>
    ```
- 可以取消事件的冒泡
     - event.stopPropagation();
     - event.cancelBubble = true;
```js
    <div style="border:1px solid black;height:100px;" onclick="alert('div');">
        <p style="border:1px solid red;height:50px;" onclick="alert('p');">
            ptext
            <input type="button" value="button1" onclick="event.cancelBubble=true;alert('button');"/>
        </p>
    </div>
    ```

Unit07： document 对象、事件