• 欢迎大家分享资料!前往留言板评论即可!

js 事件

合宙 模组资料网 2年前 (2021-05-15) 276次浏览 0个评论 扫描二维码
文章目录[隐藏]

事件

事件:触发-响应机制

事件三要素

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

事件的基本使用

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

属性操作

非表单元素的属性

href、title、id、src、className

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

var pic = document.getElementById('pic');
console.log(pic.src);
  • innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
  • HTML转义符
"       "
'       &apos;
&       &
<       <   // less than  小于
>       >   // greater than  大于
空格      
©       ©
  • innerHTML和innerText的区别

  • innerText的兼容性处理

表单元素属性

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

自定义属性操作

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

样式操作

  • 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
  • 注意

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

类名操作

  • 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';

创建元素的三种方式

document.write()

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

innerHTML

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

document.createElement()

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

性能问题

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

转载请注明原文链接:js 事件
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址