day13 元素 事件 事件对象

自定义属性操作

• getAttribute() 获取标签行内属性

• setAttribute() 设置标签行内属性

• removeAttribute() 移除标签行内属性

• 与element.属性的区别: 上述三个方法用于获取任意的行内（自定义）属性。

样式(css)操作

样式显示在标签行内

var div1 = document.getElementById('div1');
div1.style.width = '100px';

属性值是字符串，必须加上单位

类名操作

• 修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字，定义变量，属性不能用关键字

创建元素的三种方式

1.document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

2.innerHTML

var box = document.getElementById('box');
box.innerHTML = '<p>新标签</p>';

3.document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);
div.innertext="我是一个div"

事件详解

注册/移除事件的三种方式

1.
btn.onclick = function() {
	alert(2);
}

2.btn.addEventListener('click', function() {
	alert(1);
});
 

3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)

事件的三个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

参数为false是冒泡 为true是捕获

事件对象的属性和方法

• event.type 获取事件类型
• clientX/clientY 所有浏览器都支持，窗口位置
• pageX/pageY IE8以前不支持，页面位置
• event.target || event.srcElement 用于获取触发事件的元素
• event.preventDefault() 取消默认行为

• 跟着鼠标飞的天使

<img src="../img/tiamui.jpeg" alt="" id="tmui" width="200">

<script>
    var tmui=document.getElementById("tmui")
    /*mousemove：监听鼠标的移动*/
    document.onmousemove=function (ev) {
        /*兼容性操作*/
        /*1.client是以页面最上面为基准  如果页面只有1000px的高度不会滚动
        * 只会在这个页面进行滚动
        * */

        /*2.如果页面高为3000px  那么是可以滚动的    此时cient就是还是以
        第一个页面的1000px为准
        page则是在下一个3000px的页面随之而滚动 适应性更好  推荐使用
        * */

        /*3.ev是一个事件的意思  他输出的是一个数值所以要加上一个引号可以转换成
        * 字符串 字符串需要单位  常常使用px
        * 这样就会随着鼠标的移动图片也跟着移动了 */
        // tmui.style.left=ev.clientX+"px"
        // tmui.style.top=ev.clientY+"px"

        tmui.style.left=ev.pageX+"px"
        tmui.style.top=ev.pageY+"px"
    }

</script>

阻止事件传播的方式

• 标准方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

• onmouseup 鼠标按键放开时触发
• onmousedown 鼠标按键按下触发
• onmousemove 鼠标移动触发
• onkeyup 键盘按键按下触发
• onkeydown 键盘按键抬起触发