14.DOM(文档对象模型)-dom事件

// 1、获取事件源

        var ldh = document.getElementById('ldh');

        var zxy = document.getElementById('zxy');

        var img = document.querySelector('img');

        // 2、注册事件

        zxy.onclick = function() {

            img.src = 'images/img.jpg';

            img.title = '张学友';

        }

        ldh.onclick = function() {

            img.src = 'images/ldh.jpeg';

            img.title = '刘德华';

        }

四、操作元素-表单元素属性

1. 利用DOM可以修改如下表单元素的属性：

type、value、checked、selected、disabled、

        var btn = document.querySelector('button');

        var inp = document.querySelector('input');

        btn.onclick = function() {

            inp.value = "你笑什么笑";

如果想让某个表单被禁用，不能被点击，可以使用disabled

// btn.disabled = true;

this指向是的事件函数的调用者 btn

            this.disabled = true;

        }

2. 应用小案例-密码显示和隐藏

var inp = document.querySelector('input');

var lab = document.querySelector('label');

var img = document.querySelector('img');

算法：利用一个flag变量，来判断flag的值，如果是0就切换为文本框，flag赋值为1，如果是1就切换为密码框，flag设置为0

        var flag = 0;

        lab.onclick = function() {

            if (flag == 0) {

                inp.type = 'text';

                img.src = 'images/mi-logo.png';

                flag = 1;

            } else {

                inp.type = 'password';

                img.src = 'images/mi-home.png';

                flag = 0;

            }

        }

五、操作元素-修改样式

样式属性操作：可以通过js来修改大小、颜色、位置等样式

1. element.style 行内样式操作适用于修改样式比较少的时候使用

        var div = document.querySelector('div');

        div.onclick = function() {

            div.style.backgroundColor = 'blue';

            div.style.width = '400px';

        }

2. element.className 类名样式操作，适用修改样式多的时候使用

className会直接覆盖之前的类名，如果要保留原来的类名，要在里面加上原先的类名

var p = document.querySelector('p');

        p.onclick = function() {

            p.className = 'change';

        }

六、注册和删除事件

1. 注册事件

1）传统注册方式

以on开头的，比如 onclick

特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数

2) 方法监听注册方式

addEventListener(type, listener) 是一个方法，IE9之前不支持特点：同一个元素同一个事件可以注册多个监听器

type：事件类型字符串，比如click 等，不要带on

3) IE9之前：attachEvent(type, listener) 很少使用，了解

type：事件类型字符串，带on

2. 删除事件

var divs = document.querySelectorAll('div');

1）传统注册事件解绑

        divs[0].onclick = function() {

                alert('1');

                divs[0].onclick = null;

            }

2) 事件监听方式解绑

        divs[1].addEventListener('click', fn);

        function fn() {

            alert('2');

            divs[1].removeEventListener('click', fn);

        }

3) IE9之前老版本浏览器解绑

        divs[2].attachEvent('onclick', fn1);

        function fn1() {

            alert('2');

            divs[2].detachEvent('onclick', fn1);

        }