计划写一个例子系列来帮助前端新童鞋入坑,同时也梳理一下自己的知识体系。预计有30篇左右,本文是第一篇:如何给页面上的按钮绑定一个事件? 文中的代码复制粘贴保存为html文件即可在Chrome里预览~ 这个例子实现的是在页面里有一个按钮,点击后弹出一个 Hello 弹窗。
1、原生实现
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<button onclick="buttonHandler()">
按钮
</button>
</body>
</html>
复制代码
也可以这样:
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<button id="button">
按钮
</button>
<script>
var button = document.getElementById('button')
button.addEventListener('click', buttonHandler)
</script>
</body>
</html>
复制代码
这个应该很容易理解,问题是两段 script 里的代码是否可以合并到一起?合并之后放到什么位置?
2、JQuery实现
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<button id="button">
按钮
</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('#button').on('click', buttonHandler)
</script>
</body>
</html>
复制代码
$
方法是如何实现的?.on
方法是如何实现的?
3、Vue实现
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<div id="app">
<button @click="buttonHandler">
按钮
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
buttonHandler: buttonHandler
},
})
</script>
</body>
</html>
复制代码
Vue
是如何实现事件绑定的?Vue
这个类都做了些什么事情?
4、React实现
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
class Button extends React.Component {
render() {
return React.createElement(
'button',
{ onClick: buttonHandler },
'按钮'
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(Button), domContainer);
</script>
</body>
</html>
复制代码
React
又是如何实现事件绑定的?
5、React和JSX实现
<html>
<head>
<title></title>
<script>
function buttonHandler() {
alert('Hello')
}
</script>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Button extends React.Component {
render() {
return (
<button onClick={buttonHandler}>按钮</button>
)
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(Button), domContainer);
</script>
</body>
</html>
复制代码
什么是JSX
? JSX
语法为什么可以运行在web里?
小结
本篇涉及到的内容点有:
- 原生的HTML/JS(1、2)
- MVVM框架(3、4)
- Babel编译(5)
例子很简单,最好能理解每一行代码的意义,后面的问题可以通过找资料、看源码来解答,入门至少要理解到jQuery
后面的问题这里。Vue
和React
的例子放在这里是为了帮助理解,可以循序渐进的去学习。 已经整理出了问题和关键点,可以自行查资料~如果有必要,例子后面的答案会另开一篇~