dom.onclick 与 <html onclick>的区别

最新推荐文章于 2023-08-09 15:04:18 发布

原创最新推荐文章于 2023-08-09 15:04:18 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文通过一个简单的JavaScript示例，展示了如何理解`this`关键字在不同上下文中的指向问题。通过定义一个对象并为其添加两个方法，演示了在对象方法调用与普通函数调用时`this`的不同表现。

function test()
{
alert(this)
}
cc={}
cc.aa=test;

cc.bb=function (){test()}
cc.aa()//this==cc
cc.bb()//this==window

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_4926

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端八股文-dom.onclick 和 dom.addEventListener的区别，内联事件监听器，逻辑与 && 和逻辑或 ||，数据类型，执行上下文，执行栈，栈溢出，变量提升，作用域，块级作

VAN

11-07

564

前端学习

dom-on:别名 DOM 节点的 .addEventListener() 到 .on()

06-07

支配别名DOM节点的.addEventListener()来.on() 安装 $ npm install dom-on 用法 const on = require ( 'dom-on' ) const button = document . createElement ( 'button' ) on ( button ) button . on ( 'click' , ( ) => console . log ( 'oOOoooOOoooO!' ) ) 也可以看看 - 使 dom 元素更易于使用执照

参与评论您还未登录，请先登录后发表或查看评论

Dom 中的 onclick 事件

liu_xiao_bai

12-29

975

HTML Dom中直接使用onclick 事件的影响 1、onclick 添加的事件函数是作用于全局环境中，会造成全局污染和冲突，造成意想不到的后果 2、给很多Dom 元素使用 onclick 会影响性能，因为网页需要处理事件的函数 3、如果使用了onclick的Dom元素，动态从Dom树中删除的话，需要先把该事件销毁，否则会造成内存泄漏bug 可以考虑事件委托解决 ...

dom onclick and dojo onClick

iteye_5076的博客

03-24

212

简单介绍一下dom的onclick是件和dojo的weight的onClick事件的不同 1、首先从字幕上区分一个是onclick，另一个是onClick 2、获得元素的方式不同，前者通过dojo.byId('id');后者通过digit.byId('id'); 3、 dojo.require("dataPd"); dojo.addOnLoa...

dom.onclick与jquery.click()的区别

BlueMiracle

06-06

735

jquery.click()是在onclick事件中绑定一个函数 dom原有的onclick事件还是起作用的 $("#ss").click(function(){alert(2);}) 会alert两次 dom.onclick直接在该事件设置一个函数

4-JavaScript基础知识-执行上下文/作用域/this(作用域链/LHS/RHS/实现块作用域/闭包）（一万字图文详细讲解）

weixin_44181180的博客

05-12

2140

文章目录前言执行上下文总结前言这一部分是JavaScript中比较难以理解但又非常重要的一部分，只有理解了这一部分，我们才能更深一步的认识到JavaScript的运行过程，才能从根源去认识和解决问题。曾经很多的地方只知道要这么做却不知道为什么这么做，在学习这部分后才明白，并且能理解之前做法的一些不好，可以优化的的地方。执行上下文总结在这里我们主要介绍 Boolean 和 number 以及 String 这三种类型的准换规则等，熟悉这些变化规则是很有必要的，我们才能更好的了解使用。 ...

DOM事件 ————onclick篇，小总结

进一步，有一步的欢喜。

09-05

5552

创建事件，介绍三种方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test DOM事件绑定</title> </head> <!-- 方法一 --&a

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  </head> <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <body> <div id="root"></div> <script type="text/babel"> class App extends React.Component { constructor() { super(); this.state = { counter: 0 } } render() { const { counter } = this.state; return ( <div> <h2>当前计数:{counter}</h2> <button onClick={this.add.bind(this)} > +</button > <button onClick={this.sub.bind(this)} > -</button > </div > ) } add() { this.setState({ counter: this.state.counter++ }) } sub() { this.setState({ counter: this.state.counter-- }) } } const root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<App />) </script> </body> </html>点击无效

06-11

这段代码是一个使用 React 和 ...setState 操作不正确，应该使用 setState((prevState) => ({ counter: prevState.counter + 1 })) 和 setState((prevState) => ({ counter: prevState.counter - 1 })) 来更新 state。

function selCenter(){ var cList = "<ul class='inp-li wf'>"; cList += "<li><span class='cont-tit'><a href='#' onClick='fn_goCenter(\"/center/customerMain.do\");'>고객센터 이동</a></span></li>"; cList += "<li><span class='cont-tit'><a href='#' onClick='fn_goCenter(\"/center/emergenMain.do\");'>긴급봉사 이동</a></span></li>"; cList += "</ul>"; Common.selCenter(cList); }请解释下这段代码

最新发布

11-11

cList += "<li><span class='cont-tit'><a href='#' onClick='fn_goCenter(\"/center/customerMain.do\");'>고객센터 이동</a></span></li>"; // 3. 添加菜单项2：链接到紧急服务主页面 cList += "<li><span ...

import React, { Component } from 'react'; 解释一下函数组件的 onClick, text 是对应<FunctionalButton onClick={this.increment} text="Increment Count" /> 的生命 function FunctionalButton({ onClick, text }) { return <button onClick={onClick}>{text}</button>; } // 类组件 class ClassCounter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState(prevState => ({ count: prevState.count + 1 })); } render() { return ( <div> <p>Count: {this.state.count}</p> <FunctionalButton onClick={this.increment} text="Increment Count" /> </div> ); } } // App 组件 function App() { return ( <div> <h1>React Components Example</h1> <ClassCounter /> </div> ); } export default App;

04-25

<think>好的，我现在需要帮助用户理解React函数组件中props的传递和使用，特别是onClick和text的对应关系。用户提到的例子是FunctionalButton组件中的onClick和text如何在类组件ClassCounter中被使用。首先，我应该...

runtime-core.esm-bundler.js:6719 Uncaught TypeError: this.setCheckedArray is not a function at Proxy.payAll (VM454 Cart.vue:63:12) at onClick._cache.<computed>._cache.<computed> (VM452 Cart.vue:86:81) at callWithErrorHandling (runtime-core.esm-bundler.js:6656:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6665:1) at HTMLSpanElement.invoker (runtime-dom.esm-bundler.js:347:1) payAll @ VM454 Cart.vue:63 onClick._cache.<computed>._cache.<computed> @ VM452 Cart.vue:86 callWithErrorHandling @ runtime-core.esm-bundler.js:6656 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:6665 invoker报错

06-10

这是一个未捕获的 TypeError 异常，提示说 `this.setCheckedArray` 不是一个函数。在 `VM454 Cart.vue` 的第 63 行调用了 `payAll` 方法，该方法中使用了 `setCheckedArray` 函数，但是该函数不存在或者不是 `this` ...

动态生成DOM 拼接字符，onclick带有参数

qq_42763335的博客

06-18

1301

var str = '<div class="lbutt">' + '<input type="button" id="viewBtn" value="查看" class="inpbtn viewBtn" onclick=openSaveWin("' + rows.id + '")">' + '<input type...

DOM——01（获取元素；onclick事件；案例1）

Galaksen的博客

08-04

2143

目录 1.为元素注册事件案例(onclick事件) 2.点击按钮显示图片并设置其宽高 3.点击按钮修改p标签的内容 4.点击按钮修改a标签的地址和文字内容 5.点击按钮设置多个p标签的内容 6.点击按钮修改图片的alt和title属性 7.点击按钮修改所有文本框的值 8.点击每个图片弹出对话框 9.点击按钮修改当前按钮(自身)的value属性 10.排他功能 11.点击超链接...

DOM之事件操作

王王仙贝的博客

08-25

337

注册事件 1、传统方法利用on开头的事件，例如：onclick btn.onclick=function(){} 特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 2、方法监听注册 w3w标准推荐方式 addEventListener()是一个方法 eventTarget.addEventListener(type, listener[, useCapture ]) type:事件类型字符串，比如：click，mouseove

4、DOM

qq_47538417的博客

06-15

184

DOM

DOM--事件操作

JJ_Smilewang的博客

05-30

1259

1. 事件基础 JavaScript可以让我们创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解事件就是：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，用户点击某按钮时产生一个事件，然后去执行某些操作。 1.1 事件三要素 ① 事件源（谁） ② 事件类型（什么事件） ③ 事件处理程序（做啥事） 1.2 案例解析 <body> <button>点击</button>.

2、DOM事件

hzg_hou的博客

05-12

210

onmouseleave | 鼠标离开 | DOM对象.onmouseleave = function() {} || onmousewheel | 鼠标滚轮 | DOM对象.onmousewheel = function() {} || onmousemove | 鼠标移动 | DOM对象.onmousemove = function() {} || onmouseout | 鼠标移除 | DOM对象.onmouseout = function(){} |//a) 先判断当前函数有几个参数?

JavaScript中DOM事件对象

weixin_52629158的博客

05-02

875

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。event.offsetX、event.offsetY（相对事件发生的具体元素左上角的定位）ev.clientX ---- cliectX 事件发生时，鼠标距离可视区域的X距离。1.1.1.1 事件对象event和事件冒泡、事件捕获、事件委托。事件分鼠标事件、表单事件、键盘事件。

JavaScript dom事件事件传递事件冒泡事件方法

zdn135860_的博客

08-09

527

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../React-js/react.development.js" type="text/javascript"></script> <script src="../React-js/react-dom.development.js" type="text/javascript"></script> <script src="../React-js/babel.min.js"></script> <script src="../React-js/prop-types.js"></script> </head> <body> <div id="test"> </div> <script type="module/babel"> import {useState} from "react" function Example(){ const [count,setCount]=useState(0) return ( <div> <p>Clike {count}次</p> <button onClick={()=>setCount(count+1)}>Clicke me</button> </div> ) } ReactDOM.render(<Example />,document.getElementById("test")) </script> </body> </html>为何渲染不出来

10-15