js 事件

事件

事件：触发-响应机制

事件三要素

• 事件源:触发(被)事件的元素
• 事件名称: click 点击事件
• 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

1
2
3
4

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

属性操作

非表单元素的属性

href、title、id、src、className

1
2
3
4
5
6

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

• innerHTML和innerText

1
2
3
4
5

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

• HTML转义符

1
2
3
4
5
6
7

"		"
'		'
&		&
<		<   // less than  小于
>		>   // greater than  大于
空格	   &nbsp;
©		&copy;

• innerHTML和innerText的区别

• innerText的兼容性处理

表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

自定义属性操作

• getAttribute() 获取标签行内属性
• setAttribute() 设置标签行内属性
• removeAttribute() 移除标签行内属性
• 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

• 使用style方式设置的样式显示在标签行内

  1 2 3 4

  var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red';

• 注意

  通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

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

  1 2	var box = document.getElementById('box'); box.className = 'show';

创建元素的三种方式

document.write()

1

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

innerHTML

1
2

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

document.createElement()

1
2

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

• innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
• 可以借助字符串或数组的方式进行替换，再设置给innerHTML
• 优化后与document.createElement性能相近