利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别
同样的功能,不同的书写格式。
1.个人觉得比较繁琐的写法,但是比较常见,特别是在大项目的时候常用的就是这种方法:
<div id="mouse" onmouseover="mOver()" onmouseout="mOut()" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(){
document.getElementById("mouse").innerHTML="Thank You"
}
function mOut(){
document.getElementById("mouse").innerHTML="Mouse Over Me"
}
</script>
2.这个中法比较简单,而且可以少些不少代码:
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别的更多相关文章
- DOM节点中获取文本易混淆的属性
DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...
- DOM节点的增删改查以及class属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- javascript之DOM编程通过html元素的标签属性找节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
随机推荐
- Python内置模块-time && datatime
Python提供两种时间表示方式,一种是时间戳,从1970年1月1日 0时开始.一种是struct_time数组格式,共有9个元素. import time print(time.time()) #返 ...
- PostgreSQL——服务器基本设置与操作
一.编译安装: 环境准备: GNU make 版本 >=3.8 (make --version) ISO/ANSI C 编译器,至少須兼容 C89 标准,GCC 或 intel 編译器等均可 g ...
- 【AI图像识别一】人脸识别测试探索
****************************************************************************** 本文主要介绍AI能力平台的人脸识别技术的测 ...
- c#获取图片的高和宽
Bitmap pic = new Bitmap(图片文件名); int width = pic.Size.Width; // 图片的宽度int height = pic.Size.Height; // ...
- docker容器的常见操作
进入容器 docker exec -it 12a022ee8127 /bin/bash 交互模式进入容器 docker exec -it 12a022ee8127 ip a 查看容器的ip等信息 批量 ...
- 不走弯路,微信小程序的快速入门?
微信小程序下载注册地址:https://mp.weixin.qq.com/cgi-bin/wx 微信小程序登开发者平台地址(可以查看小程序APPID):https://mp.weixin.qq.com ...
- Pregel的应用实例——单源最短路径
- VACUUM - 垃圾收集以及可选地分析一个数据库
SYNOPSIS VACUUM [ FULL ] [ FREEZE ] [ VERBOSE ] [ table ] VACUUM [ FULL ] [ FREEZE ] [ VERBOSE ] ANA ...
- Berry 指令设计
Berry 脚本源代码需要被编译为字节码指令流才能被 Berry 虚拟机执行.本文将详细地讲解 Berry 字节码指令(下面简称指令)的设计和实现.为了达到这个目的,本文由 3 部分构成:第 1 小节 ...
- docker 常用
docker 163仓库 # 更换docker源163 vim /etc/docker/daemon.json { "registry-mirrors": ["http: ...